mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-07 22:56:51 +02:00
phuoc-ng
GitHub
@@ -18,4 +18,4 @@ gtag('js', new Date());
|
||||
gtag('config', 'UA-139616701-3');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -20,8 +20,7 @@ interface DetailsLayoutProps {
|
||||
|
||||
const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
|
||||
useDocumentTitle(`CSS Layout ∙ ${pattern}`);
|
||||
|
||||
const products = randomItems(ProductList, 3);
|
||||
const products = React.useMemo(() => randomItems(ProductList, 3), []);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
|
||||
@@ -64,89 +64,24 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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)',
|
||||
borderBottomColor: 'transparent',
|
||||
borderRadius: '4px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Container -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 4px;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Each accordion item -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<div class="item">
|
||||
<!-- Heading -->
|
||||
<div style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
">
|
||||
<div class="header">
|
||||
<!-- The toggle icon -->
|
||||
<div style="margin-right: 12px;">...</div>
|
||||
<div class="toggle">...</div>
|
||||
|
||||
<!-- The title -->
|
||||
<div style="
|
||||
flex: 1; /* Take remaining width */
|
||||
">
|
||||
<div class="title">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The content -->
|
||||
<div style="
|
||||
/* For selected item */
|
||||
display: block;
|
||||
|
||||
/* For not selected item */
|
||||
display: none;
|
||||
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 16px;
|
||||
">
|
||||
<div class="content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,7 +90,86 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
}
|
||||
.toggle {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.title {
|
||||
/* Take remaining width */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* For not selected item */
|
||||
display: none;
|
||||
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 16px;
|
||||
}
|
||||
.content.selected {
|
||||
/* For selected item */
|
||||
display: block;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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)',
|
||||
borderBottomColor: 'transparent',
|
||||
borderRadius: '4px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
||||
|
||||
@@ -20,151 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Up arrow button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
@@ -281,7 +137,152 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
||||
|
||||
@@ -40,24 +40,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
@@ -87,7 +70,24 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '64px',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '100%',
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
|
||||
M5,20.5
|
||||
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Rounded border */
|
||||
border-radius: 50%;
|
||||
@@ -82,7 +41,48 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '64px',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '100%',
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
|
||||
M5,20.5
|
||||
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
||||
|
||||
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -68,7 +39,36 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
||||
|
||||
@@ -20,45 +20,50 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Breadcrumb item -->
|
||||
<a>...</a>
|
||||
|
||||
<!-- Separator -->
|
||||
<div style="margin: 0 8px;">/</div>
|
||||
<div class="separator">/</div>
|
||||
|
||||
<!-- Repeated items and separators -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.separator {
|
||||
margin: 0 8px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,43 +21,8 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
">
|
||||
html={`
|
||||
<button class="button">
|
||||
<!-- Icon -->
|
||||
...
|
||||
|
||||
@@ -65,7 +30,44 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.button {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,55 +21,10 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
margin: '0 -8px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(10).fill(0).map((_, index) => {
|
||||
return (
|
||||
<div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
|
||||
<Rectangle height={80} />
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Put a card in the next row when previous cards take all width */
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- A card with given width -->
|
||||
<div style="
|
||||
/* There will be 4 cards per row */
|
||||
flex-basis: 25%;
|
||||
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">
|
||||
<div class="card">
|
||||
...
|
||||
</div>
|
||||
|
||||
@@ -77,7 +32,55 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Put a card in the next row when previous cards take all width */
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.card {
|
||||
/* There will be 4 cards per row */
|
||||
flex-basis: 25%;
|
||||
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
margin: '0 -8px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(10).fill(0).map((_, index) => {
|
||||
return (
|
||||
<div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
|
||||
<Rectangle height={80} />
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
||||
|
||||
@@ -22,37 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
||||
|
||||
@@ -21,24 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<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={`
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -47,7 +30,24 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,21 +25,20 @@ const Details: React.FC<{}> = () => {
|
||||
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<InputChip>CSS</InputChip>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="chip">
|
||||
<!-- Content -->
|
||||
<div class="chip__content">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The close button -->
|
||||
<!-- See https://csslayout.io/patterns/close-button -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.chip {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
@@ -53,18 +52,25 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
/* Spacing */
|
||||
padding: 4px 8px;
|
||||
">
|
||||
<!-- Content -->
|
||||
<div style="margin-right: 4px;">
|
||||
...
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- The close button -->
|
||||
<!-- See https://csslayout.io/patterns/close-button -->
|
||||
...
|
||||
</div>
|
||||
.chip__content {
|
||||
margin-right: 4px;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<InputChip>CSS</InputChip>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
||||
|
||||
@@ -56,74 +56,15 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ height: '32px', width: '32px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
{
|
||||
Array(numItems).fill(0).map((_, i) => {
|
||||
return (
|
||||
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- The trigger element that will show all circles when user clicks it -->
|
||||
...
|
||||
|
||||
<!-- A circle menu item -->
|
||||
<div style="
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*
|
||||
80px is the distance from the item to the trigger element.
|
||||
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is 360 / numberOfItems * indexOfItem
|
||||
*/
|
||||
transform: rotate(0deg) translateX(-80px);
|
||||
|
||||
/* Must have the same size as the trigger element */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
">
|
||||
<div class="item">
|
||||
<!-- The inner -->
|
||||
<div style="
|
||||
/*
|
||||
Rotate it to make it displayed vertically
|
||||
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is -(360 / numberOfItems * indexOfItem)
|
||||
*/
|
||||
transform: rotate(-0deg);
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
">
|
||||
<div class="inner">
|
||||
<!-- The content -->
|
||||
...
|
||||
</div>
|
||||
@@ -133,7 +74,71 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.item {
|
||||
/* Position */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
/*
|
||||
80px is the distance from the item to the trigger element.
|
||||
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is 360 / numberOfItems * indexOfItem
|
||||
*/
|
||||
transform: rotate(0deg) translateX(-80px);
|
||||
|
||||
/* Must have the same size as the trigger element */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
.inner {
|
||||
/*
|
||||
Rotate it to make it displayed vertically
|
||||
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
|
||||
in case you want to have a total of 6 menu items.
|
||||
The formulation is -(360 / numberOfItems * indexOfItem)
|
||||
*/
|
||||
transform: rotate(-0deg);
|
||||
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ height: '32px', width: '32px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
{
|
||||
Array(numItems).fill(0).map((_, i) => {
|
||||
return (
|
||||
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<button style="
|
||||
/* Reset */
|
||||
background-color: transparent;
|
||||
@@ -113,7 +67,53 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</button>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
||||
|
||||
@@ -22,40 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
left: 0,
|
||||
padding: '8px',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '12px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ width: '96px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Banner is displayed at the bottom */
|
||||
bottom: 0;
|
||||
@@ -80,7 +47,40 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
left: 0,
|
||||
padding: '8px',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '12px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ width: '96px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -22,51 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -109,7 +65,51 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderBottomLeftRadius: '50% 40%',
|
||||
borderBottomRightRadius: '50% 40%',
|
||||
height: '50%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Background color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
@@ -53,7 +35,25 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderBottomLeftRadius: '50% 40%',
|
||||
borderBottomRightRadius: '50% 40%',
|
||||
height: '50%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
||||
|
||||
@@ -70,98 +70,103 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='1' isChecked={false}>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='2' isChecked={true}>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='3' isChecked={false}>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
">
|
||||
html={`
|
||||
<label class="label">
|
||||
<!-- The real checkbox -->
|
||||
<input
|
||||
type="checkbox"
|
||||
style="
|
||||
/* Hide it */
|
||||
display: none;
|
||||
"
|
||||
/>
|
||||
<input type="checkbox" class="label__input" />
|
||||
|
||||
<!-- The fake square -->
|
||||
<div style="
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 8px;
|
||||
padding: 4px;
|
||||
">
|
||||
<div class="label__square">
|
||||
<!-- The inner square -->
|
||||
<div style="
|
||||
border-radius: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* For selected checkbox */
|
||||
background-color: #00449E;
|
||||
|
||||
/* For not selected checkbox */
|
||||
background-color: transparent;
|
||||
" />
|
||||
<div class="label__checkbox label__square--selected"></div>
|
||||
</div>
|
||||
|
||||
<!-- The text -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.label {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label__input {
|
||||
/* Hide it */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.label__square {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.label__checkbox {
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.label__checkbox--selected {
|
||||
/* For selected checkbox */
|
||||
background-color: #00449E;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='1' isChecked={false}>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='2' isChecked={true}>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='3' isChecked={false}>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -71,100 +71,107 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
">
|
||||
html={`
|
||||
<label class="label">
|
||||
<!-- The real radio -->
|
||||
<input
|
||||
type="radio"
|
||||
style="
|
||||
/* Hide it */
|
||||
display: none;
|
||||
"
|
||||
/>
|
||||
<input type="radio" class="label__input" />
|
||||
|
||||
<!-- The fake circle -->
|
||||
<div style="
|
||||
/* Rounded border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 9999px;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 8px;
|
||||
padding: 4px;
|
||||
">
|
||||
<div class="label__circle">
|
||||
<!-- The inner circle -->
|
||||
<div style="
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* For selected radio */
|
||||
background-color: #00449E;
|
||||
|
||||
/* For not selected radio */
|
||||
background-color: transparent;
|
||||
" />
|
||||
<div class="label__radio label__radio--selected"></div>
|
||||
</div>
|
||||
|
||||
<!-- The text -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.label {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label__input {
|
||||
/* Hide it */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.label__circle {
|
||||
/* Rounded border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 9999px;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.label__radio {
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
/* For not selected radio */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.label__radio--selected {
|
||||
/* For selected radio */
|
||||
background-color: #00449E;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,46 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '200px',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'skewY(-5deg)',
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div style={{ width: '60%' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the diagonal area */
|
||||
position: relative;
|
||||
@@ -90,7 +51,46 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '200px',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'skewY(-5deg)',
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div style={{ width: '60%' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
||||
|
||||
@@ -22,43 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
height: '32px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -80,7 +44,43 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
height: '32px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -23,58 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '400px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -100,7 +49,58 @@ const Details: React.FC<{}> = () => {
|
||||
<div>...</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '400px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -44,36 +44,16 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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} />
|
||||
<Dot index={3} />
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<ul style="
|
||||
html={`
|
||||
<ul class="container">
|
||||
<li class="item" />
|
||||
|
||||
<!-- Repeat other dots -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -83,26 +63,52 @@ const Details: React.FC<{}> = () => {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
">
|
||||
<li style="
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.item {
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
/* Active dot */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/* Active dot */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
|
||||
/* Inactive dot */
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
/* Inactive dot */
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
|
||||
/* OPTIONAL: Spacing between dots */
|
||||
margin: 0 4px;
|
||||
" />
|
||||
</div>
|
||||
/* OPTIONAL: Spacing between dots */
|
||||
margin: 0 4px;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<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} />
|
||||
<Dot index={3} />
|
||||
</ul>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,41 +23,19 @@ const Details: React.FC<{}> = () => {
|
||||
This pattern is also known as off-canvas.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Backdrop -->
|
||||
<div class="overlay"></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Container takes full size */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
@@ -66,39 +44,65 @@ const Details: React.FC<{}> = () => {
|
||||
width: 100%;
|
||||
|
||||
z-index: 9999;
|
||||
">
|
||||
<!-- Backdrop -->
|
||||
<div style="
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.overlay {
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
/* User still can see the content of main page */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
/* User still can see the content of main page */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
z-index: -1;
|
||||
" />
|
||||
z-index: -1;
|
||||
}
|
||||
.sidebar {
|
||||
/* Take full height */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div style="
|
||||
/* Take full height */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
|
||||
/* Background */
|
||||
background-color: #fff;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
/* Background */
|
||||
background-color: #fff;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px dashed rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '80%',
|
||||
justifyContent: 'center',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Block justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -63,7 +34,36 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px dashed rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '80%',
|
||||
justifyContent: 'center',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Block justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div className="p-drop-cap">
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
/* Styles for the first letter */
|
||||
.p-drop-cap:first-letter {
|
||||
@@ -64,7 +43,28 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div className="p-drop-cap">
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,121 +28,115 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouse over the button to see the dropdown.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-dropdown"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
|
||||
<Triangle size={8} corner='b' />
|
||||
</button>
|
||||
html={`
|
||||
<div class="dropdown">
|
||||
<!-- The trigger element -->
|
||||
<button>...</button>
|
||||
|
||||
<!-- The content -->
|
||||
<div class="dropdown-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
<div
|
||||
className="p-dropdown-content"
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
height: '200px',
|
||||
left: 0,
|
||||
paddingTop: '4px',
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
width: '200px',
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={10} justify='center' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} justify='center' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<style>
|
||||
/* Hide the dropdown's content by default -->
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
|
||||
/* Position it right below the trigger element */
|
||||
left: 0;
|
||||
paddingTop: 4px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
/* It should be on the top of other elements */
|
||||
background-color: #FFF;
|
||||
zIndex: 9999;
|
||||
|
||||
/* Size */
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Show the content when hover on the container -->
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="dropdown"
|
||||
style="
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<!-- The trigger element -->
|
||||
<button>...</button>
|
||||
|
||||
<!-- The content -->
|
||||
<div
|
||||
class="dropdown-content"
|
||||
style="
|
||||
/* Position it right below the trigger element */
|
||||
left: 0,
|
||||
paddingTop: '4px',
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
|
||||
/* It should be on the top of other elements */
|
||||
backgroundColor: '#FFF',
|
||||
zIndex: 9999,
|
||||
|
||||
/* Size */
|
||||
height: '200px',
|
||||
width: '200px',
|
||||
"
|
||||
>
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-dropdown"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
|
||||
<Triangle size={8} corner='b' />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="p-dropdown-content"
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
height: '200px',
|
||||
left: 0,
|
||||
paddingTop: '4px',
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
width: '200px',
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={10} justify='center' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} justify='center' />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -23,41 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
Fading a long section to indicate there is more content.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative', width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={50} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
|
||||
bottom: 0,
|
||||
height: '30px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the faded element */
|
||||
position: relative;
|
||||
@@ -89,7 +55,41 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative', width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={50} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
|
||||
bottom: 0,
|
||||
height: '30px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,113 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '12px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -174,7 +68,113 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '12px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
||||
|
||||
@@ -23,34 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Feature item -->
|
||||
<div style="
|
||||
display: flex;
|
||||
@@ -80,7 +53,34 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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 style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||
|
||||
@@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Fixed at the middle of side -->
|
||||
<div style="
|
||||
right: 0;
|
||||
@@ -53,7 +32,28 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -24,59 +24,31 @@ const Details: React.FC<{}> = () => {
|
||||
Type something in the input to see how the label is shown up.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-floating-container"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
padding: '0 1px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="floating-label-input"
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
htmlFor="floating-label-input"
|
||||
style={{
|
||||
left: '8px',
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transition: 'all 200ms',
|
||||
}}
|
||||
>
|
||||
Placeholder
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<style>
|
||||
.p-floating-container {
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- The input -->
|
||||
<input placeholder="Placeholder" class="container__input" />
|
||||
|
||||
<!-- The label -->
|
||||
<label class="container__label">Placeholder</label>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-floating-container label {
|
||||
/*
|
||||
Show the label at desired position when the
|
||||
placeholder of input isn't shown
|
||||
*/
|
||||
.container__input:not(:placeholder-shown) + .container__label {
|
||||
background: #FFF;
|
||||
transform: translate(0, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.container__label {
|
||||
/* Position the label */
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
@@ -84,26 +56,55 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
/* Hide it by default */
|
||||
opacity: 0;
|
||||
transition: 'all 200ms',
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
/* Show the label at desired position when the placeholder of input isn't shown */
|
||||
.p-floating-container input:not(:placeholder-shown) + label {
|
||||
background: #FFF;
|
||||
transform: translate(0, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="p-floating-container">
|
||||
<!-- The input -->
|
||||
<input placeholder="Placeholder" />
|
||||
|
||||
<!-- The label -->
|
||||
<label>Placeholder</label>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-floating-container"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
padding: '0 1px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="floating-label-input"
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
htmlFor="floating-label-input"
|
||||
style={{
|
||||
left: '8px',
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transition: 'all 200ms',
|
||||
}}
|
||||
>
|
||||
Placeholder
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,34 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -66,7 +39,34 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||
|
||||
@@ -20,81 +20,21 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
padding: 0,
|
||||
position: 'absolute',
|
||||
right: '16px',
|
||||
top: '16px',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: 24,
|
||||
stroke: '#000',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: 24,
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M7,16.999l10-10
|
||||
M17,16.999l-10-10
|
||||
M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
|
||||
S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
|
||||
<li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
|
||||
<li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
|
||||
<li style={{ width: '160px' }}><Rectangle /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- The close button -->
|
||||
<button class="close">
|
||||
...
|
||||
</button>
|
||||
|
||||
<!-- The navigation menu -->
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Full screen overlay */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
@@ -106,24 +46,89 @@ const Details: React.FC<{}> = () => {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- The close button -->
|
||||
<button style="
|
||||
/* Shown at top right corner */
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
">
|
||||
...
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- The navigation menu -->
|
||||
<ul>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
.close {
|
||||
/* Shown at top right corner */
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
padding: 0,
|
||||
position: 'absolute',
|
||||
right: '16px',
|
||||
top: '16px',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: 24,
|
||||
stroke: '#000',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: 24,
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M7,16.999l10-10
|
||||
M17,16.999l-10-10
|
||||
M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
|
||||
S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
|
||||
<li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
|
||||
<li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
|
||||
<li style={{ width: '160px' }}><Rectangle /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,97 +21,101 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 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 style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '20%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<header>
|
||||
...
|
||||
</header>
|
||||
<main style="
|
||||
/* Take the remaining height */
|
||||
flex-grow: 1;
|
||||
|
||||
/* Layout the left sidebar, main content and right sidebar */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
">
|
||||
<main class="main">
|
||||
<!-- Left sidebar -->
|
||||
<aside style="
|
||||
width: 25%;
|
||||
">...</aside>
|
||||
<aside class="left">...</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<article style="
|
||||
/* Take the remaining width */
|
||||
flex-grow: 1;
|
||||
">
|
||||
...
|
||||
</article>
|
||||
<article class="middle">...</article>
|
||||
|
||||
<!-- Right sidebar -->
|
||||
<nav style="
|
||||
width: 20%;
|
||||
">...</nav>
|
||||
<nav class="right">...</nav>
|
||||
</main>
|
||||
<footer>
|
||||
...
|
||||
</footer>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.main {
|
||||
/* Take the remaining height */
|
||||
flex-grow: 1;
|
||||
|
||||
/* Layout the left sidebar, main content and right sidebar */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.left {
|
||||
width: 25%;
|
||||
}
|
||||
.middle {
|
||||
/* Take the remaining width */
|
||||
flex-grow: 1;
|
||||
}
|
||||
.right {
|
||||
width: 20%;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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 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 style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '20%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,44 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '50%',
|
||||
color: '#FFF',
|
||||
display: 'inline-block',
|
||||
fontSize: '24px',
|
||||
height: '48px',
|
||||
position: 'relative',
|
||||
verticalAlign: 'middle',
|
||||
width: '48px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
PN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
display: inline-block;
|
||||
@@ -92,7 +55,44 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '50%',
|
||||
color: '#FFF',
|
||||
display: 'inline-block',
|
||||
fontSize: '24px',
|
||||
height: '48px',
|
||||
position: 'relative',
|
||||
verticalAlign: 'middle',
|
||||
width: '48px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
PN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,215 +20,190 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginRight: '1px',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<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
|
||||
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"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Add-on prepended -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container__addon">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
" />
|
||||
<input type="text" class="container__input" />
|
||||
</div>
|
||||
|
||||
<!-- Add-on appended -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
" />
|
||||
<input type="text" class="container__input" />
|
||||
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container__addon">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Appended and prepended add-ons -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container__addon">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
" />
|
||||
<input type="text" class="container__input" />
|
||||
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="container__addon">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container__input {
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.container__addon {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginRight: '1px',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<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
|
||||
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"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -56,31 +56,7 @@ const Details: React.FC<{}> = () => {
|
||||
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<kbd
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '4px',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
|
||||
color: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
⌘ + C
|
||||
</kbd>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<kbd style="
|
||||
/* Background and color */
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
@@ -96,7 +72,31 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</kbd>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<kbd
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '4px',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
|
||||
color: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
⌘ + C
|
||||
</kbd>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -19,38 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
|
||||
backgroundPositionY: '24px',
|
||||
backgroundSize: '100% 2em',
|
||||
height: '200px',
|
||||
lineHeight: '2em',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Lined background */
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
||||
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
|
||||
backgroundPositionY: '24px',
|
||||
backgroundSize: '100% 2em',
|
||||
height: '200px',
|
||||
lineHeight: '2em',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Align sub-items to top */
|
||||
align-items: start;
|
||||
@@ -68,7 +47,28 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,78 +28,35 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouse over the second navigation item to see the mega menu.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div className='p-mega-menu-container'>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
className='p-mega-menu-trigger'
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
width: '180px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', padding: '16px' }}>
|
||||
<div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
|
||||
<Triangle size={8} corner='b' />
|
||||
</div>
|
||||
<div className='p-mega-menu-content'>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={8} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '16px',
|
||||
width: '120px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Item -->
|
||||
...
|
||||
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<style>
|
||||
.p-mega-menu-container {
|
||||
<!-- An item that triggers displaying the mega menu -->
|
||||
<div class="trigger">
|
||||
<!-- The trigger item's content -->
|
||||
<div>...</div>
|
||||
|
||||
<!-- Mega menu -->
|
||||
<div class="content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the mega menu */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-mega-menu-content {
|
||||
.trigger:hover .content {
|
||||
/* Show the mega menu when hovering the trigger item */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
margin-top: -1px;
|
||||
@@ -119,30 +76,71 @@ const Details: React.FC<{}> = () => {
|
||||
background: #fff;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.p-mega-menu-trigger:hover .p-mega-menu-content {
|
||||
/* Show the mega menu when hovering the trigger item */
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="p-mega-menu-container">
|
||||
<!-- Item -->
|
||||
...
|
||||
|
||||
<!-- An item that triggers displaying the mega menu -->
|
||||
<div class="p-mega-menu-trigger">
|
||||
<!-- The trigger item's content -->
|
||||
<div>...</div>
|
||||
|
||||
<!-- Mega menu -->
|
||||
<div class="p-mega-menu-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div className='p-mega-menu-container'>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
className='p-mega-menu-trigger'
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
width: '180px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', padding: '16px' }}>
|
||||
<div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
|
||||
<Triangle size={8} corner='b' />
|
||||
</div>
|
||||
<div className='p-mega-menu-content'>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={8} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '16px',
|
||||
width: '120px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||
|
||||
@@ -24,144 +24,15 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
className="p-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="p-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="p-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="p-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 style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<Circle />
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
|
||||
<div
|
||||
className="p-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>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Normal menu item -->
|
||||
<div style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<div class="item">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- With hot key -->
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
/* Push the hot key to the right */
|
||||
justify-content: space-between;
|
||||
">
|
||||
<div class="item with-shortcut">
|
||||
<!-- Label -->
|
||||
...
|
||||
<!-- Hot key -->
|
||||
@@ -169,16 +40,8 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
|
||||
<!-- With image and hot key -->
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
/* Push the hot key to the right */
|
||||
justify-content: space-between;
|
||||
">
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<div class="item with-shortcut">
|
||||
<div class="with-image">
|
||||
<!-- Image -->
|
||||
...
|
||||
<!-- Label -->
|
||||
@@ -190,13 +53,153 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 1px;
|
||||
" />
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.with-shortcut {
|
||||
/* Push the hot key to the right */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.with-image {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 1px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
className="p-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="p-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="p-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="p-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 style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<Circle />
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
|
||||
<div
|
||||
className="p-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>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns
|
||||
patterns={[
|
||||
|
||||
@@ -27,57 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
represent the button for closing the modal.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</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>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0.3);
|
||||
@@ -111,7 +61,57 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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 style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,100 +25,8 @@ const Details: React.FC<{}> = () => {
|
||||
Hover on the Patterns → Navigation to see the sub dropdowns.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul className="p-nested-dropdowns">
|
||||
<li>Home</li>
|
||||
<li>
|
||||
<div>Patterns</div>
|
||||
<ul>
|
||||
<li>Layout</li>
|
||||
<li>Input</li>
|
||||
<li>
|
||||
<div>Navigation</div>
|
||||
<ul>
|
||||
<li>Breadcrumb</li>
|
||||
<li>Dropdown</li>
|
||||
<li>Menu</li>
|
||||
<li>Nested dropdown</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Display</li>
|
||||
<li>Feedback</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Products</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<style>
|
||||
/* The root */
|
||||
.p-nested-dropdowns {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
|
||||
/* Reset list styles */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-nested-dropdowns li {
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
|
||||
/* Used to position the sub dropdown */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* The sub dropdown */
|
||||
.p-nested-dropdowns ul {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Hidden by default */
|
||||
display: none;
|
||||
|
||||
/* Absolute position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
/* Reset styles */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/* Width */
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* The second level sub dropdown */
|
||||
.p-nested-dropdowns ul ul {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Change background color of list item when being hovered */
|
||||
.p-nested-dropdowns li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Show the direct sub dropdown when hovering the list item */
|
||||
.p-nested-dropdowns li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul class="p-nested-dropdowns">
|
||||
html={`
|
||||
<ul class="container">
|
||||
<li>Home</li>
|
||||
<li>
|
||||
<div>Patterns</div>
|
||||
@@ -144,7 +52,96 @@ const Details: React.FC<{}> = () => {
|
||||
<li>About</li>
|
||||
</ul>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
|
||||
/* Reset list styles */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container li {
|
||||
/* Spacing */
|
||||
padding: 8px;
|
||||
|
||||
/* Used to position the sub dropdown */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* The sub dropdown */
|
||||
.container ul {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Hidden by default */
|
||||
display: none;
|
||||
|
||||
/* Absolute position */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
/* Reset styles */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/* Width */
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* The second level sub dropdown */
|
||||
.container ul ul {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Change background color of list item when being hovered */
|
||||
.container li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Show the direct sub dropdown when hovering the list item */
|
||||
.container li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul className="p-nested-dropdowns">
|
||||
<li>Home</li>
|
||||
<li>
|
||||
<div>Patterns</div>
|
||||
<ul>
|
||||
<li>Layout</li>
|
||||
<li>Input</li>
|
||||
<li>
|
||||
<div>Navigation</div>
|
||||
<ul>
|
||||
<li>Breadcrumb</li>
|
||||
<li>Dropdown</li>
|
||||
<li>Menu</li>
|
||||
<li>Nested dropdown</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Display</li>
|
||||
<li>Feedback</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Products</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
||||
|
||||
@@ -26,46 +26,7 @@ const Details: React.FC<{}> = () => {
|
||||
represent the button for closing the notification.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -77,7 +38,46 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,55 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px solid #FFF',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Triangle backgroundColor='#FFF' corner='r' size={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the overlay */
|
||||
position: relative;
|
||||
@@ -101,7 +53,55 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px solid #FFF',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Triangle backgroundColor='#FFF' corner='r' size={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,130 +21,130 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Pagination item -->
|
||||
<div style="
|
||||
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Repeat other items -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<!-- Pagination item -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Right border */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
.item {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
<!-- Don't set the right border for the last item -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* No right border */
|
||||
border-right: none;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
/* Right border */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.item + .item {
|
||||
/* No right border */
|
||||
border-right: none;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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',
|
||||
height: '300px',
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '32px',
|
||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '32px',
|
||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -431,7 +248,190 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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',
|
||||
height: '300px',
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '32px',
|
||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '32px',
|
||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
||||
|
||||
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '64px',
|
||||
marginRight: '16px',
|
||||
position: 'relative',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '9999px',
|
||||
bottom: 0,
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -80,7 +46,41 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '64px',
|
||||
marginRight: '16px',
|
||||
position: 'relative',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '9999px',
|
||||
bottom: 0,
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,64 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div style={{ marginLeft: '8px' }}>></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Previous link sticks to the left -->
|
||||
<a>..</a>
|
||||
|
||||
@@ -85,7 +29,65 @@ const Details: React.FC<{}> = () => {
|
||||
<a>..</a>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div style={{ marginLeft: '8px' }}>></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,88 +28,7 @@ const Details: React.FC<{}> = () => {
|
||||
indicate the most popular option.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<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
|
||||
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={20} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -151,7 +70,88 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<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
|
||||
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={20} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||
|
||||
@@ -25,45 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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',
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
@@ -92,7 +54,45 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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',
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -40,38 +40,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '60%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '30%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '50%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- A property item -->
|
||||
<dl style="
|
||||
/* Content is center horizontally */
|
||||
@@ -97,7 +66,38 @@ const Details: React.FC<{}> = () => {
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '60%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '30%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '50%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -60,64 +60,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
margin: '0 auto',
|
||||
paddingBottom: '24px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<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 style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={15} />
|
||||
</Item>
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Each question and answer item -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -138,7 +81,64 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Answer -->
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
margin: '0 auto',
|
||||
paddingBottom: '24px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<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 style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={15} />
|
||||
</Item>
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
||||
|
||||
@@ -80,21 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||
<RadialProgress percentages={80} />
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||
<RadialProgress percentages={80} />
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -56,85 +56,16 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-radio-button-group"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '80px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '120px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-radio-button-group label {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Remove the right border from the last label */
|
||||
.p-radio-button-group label:last-child {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="p-radio-button-group"
|
||||
style="
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
"
|
||||
>
|
||||
<div class="container">
|
||||
<!-- Each radio item -->
|
||||
<label style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
padding: 8px;
|
||||
|
||||
/* For selected radio */
|
||||
background-color: #00449E;
|
||||
color: #FFF;
|
||||
|
||||
/* For not selected radio */
|
||||
background-color: transparent;
|
||||
color: #CCC;
|
||||
">
|
||||
<label class="container__label">
|
||||
<!-- The radio input -->
|
||||
<input
|
||||
type="radio"
|
||||
style="
|
||||
/* Hide it */
|
||||
display: none;
|
||||
"
|
||||
/>
|
||||
<input type="radio" class="container__input" />
|
||||
|
||||
<!-- The text -->
|
||||
...
|
||||
@@ -144,7 +75,77 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.container__label {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 8px;
|
||||
|
||||
/* For not selected radio */
|
||||
background-color: transparent;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.container__label:last-child {
|
||||
/* Remove the right border from the last label */
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.container__label--selected {
|
||||
/* For selected radio */
|
||||
background-color: #00449E;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.container__input {
|
||||
/* Hide it */
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-radio-button-group"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '80px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '120px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
||||
|
||||
@@ -24,99 +24,12 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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',
|
||||
display: 'inline-flex',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="radio-switch-first"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#357EDD' : '',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '#FFF' : '',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-first"
|
||||
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
|
||||
htmlFor="radio-switch-second"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '' : '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '' : '#FFF',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-second"
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={!isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Container -->
|
||||
<div style="
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border-radius: 9999px;
|
||||
display: inline-flex;
|
||||
padding: 4px;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Radio container -->
|
||||
<label style="
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
|
||||
/* For selected radio only */
|
||||
background-color: #357edd;
|
||||
color: #fff;
|
||||
">
|
||||
<input type="radio" style="display: none" />
|
||||
<label class="container__label container__label--selected">
|
||||
<input type="radio" class="container__input" />
|
||||
|
||||
<!-- Text -->
|
||||
...
|
||||
@@ -126,7 +39,104 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border-radius: 9999px;
|
||||
display: inline-flex;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.container__label {
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.container__label--selected {
|
||||
/* For selected radio only */
|
||||
background-color: #357edd;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container__input {
|
||||
display: none
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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',
|
||||
display: 'inline-flex',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="radio-switch-first"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#357EDD' : '',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '#FFF' : '',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-first"
|
||||
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
|
||||
htmlFor="radio-switch-second"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '' : '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '' : '#FFF',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-second"
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={!isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -20,27 +20,17 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="p-rating">
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={true} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<style>
|
||||
.p-rating {
|
||||
html={`
|
||||
<div class="rating">
|
||||
<button class="rating__star">☆</button>
|
||||
<button class="rating__star">☆</button>
|
||||
<button class="rating__star">☆</button>
|
||||
<button class="rating__star">☆</button>
|
||||
<button class="rating__star">★</button>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.rating {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -51,8 +41,8 @@ const Details: React.FC<{}> = () => {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.p-rating .p-rating-star:hover,
|
||||
.p-rating .p-rating-star:hover ~ .p-rating-star {
|
||||
.rating__star:hover,
|
||||
.rating__star:hover ~ .rating__star {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@@ -60,15 +50,15 @@ const Details: React.FC<{}> = () => {
|
||||
Make all previous stars selected when hover on a star
|
||||
Note that we use \`flex-direction: row-reverse\` on the container
|
||||
*/
|
||||
.p-rating .p-rating-star:hover:before,
|
||||
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
|
||||
.rating__star:hover:before,
|
||||
.rating__star:hover ~ .rating__star:before {
|
||||
color: #00449e;
|
||||
content: '\\2605';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-rating-star {
|
||||
.rating__star {
|
||||
/* Reset styles for button */
|
||||
background-color: transparent;
|
||||
border: transparent;
|
||||
@@ -78,17 +68,25 @@ Note that we use \`flex-direction: row-reverse\` on the container
|
||||
/* Used to position the hover state */
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="p-rating">
|
||||
<button class="p-rating-star">☆</button>
|
||||
<button class="p-rating-star">☆</button>
|
||||
<button class="p-rating-star">☆</button>
|
||||
<button class="p-rating-star">☆</button>
|
||||
<button class="p-rating-star">★</button>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="p-rating">
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={true} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,125 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
the cursors which indicate the associated side can be resized.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: '50%',
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px dashed rgba(0, 0, 0, 0.3);
|
||||
@@ -305,7 +187,125 @@ const Details: React.FC<{}> = () => {
|
||||
"/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: '50%',
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,76 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -168,7 +99,76 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
||||
|
||||
@@ -21,97 +21,15 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="display: flex;">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Column -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
/* Space between columns */
|
||||
margin: 0 8px;
|
||||
|
||||
/* Layout each column */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="column">
|
||||
<!-- Cover -->
|
||||
...
|
||||
|
||||
<!-- Content -->
|
||||
<div style="
|
||||
/* Take available height */
|
||||
flex: 1;
|
||||
">
|
||||
<div class="content">
|
||||
...
|
||||
</div>
|
||||
|
||||
@@ -123,7 +41,95 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.column {
|
||||
flex: 1;
|
||||
/* Space between columns */
|
||||
margin: 0 8px;
|
||||
|
||||
/* Layout each column */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
/* Take available height */
|
||||
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 style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
<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 style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,66 +20,17 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Text input -->
|
||||
<input type="text" class="container__input" />
|
||||
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
<!-- Search icon sticks to the left or right -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* If you want to place the icon before the text input */
|
||||
@@ -87,22 +38,72 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<!-- Text input -->
|
||||
<input
|
||||
type="text"
|
||||
style="
|
||||
border-color: transparent;
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
"
|
||||
/>
|
||||
}
|
||||
|
||||
<!-- Search icon sticks to the left or right -->
|
||||
...
|
||||
</div>
|
||||
.container__input {
|
||||
border-color: transparent;
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<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"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -92,7 +51,48 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,56 +21,64 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
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>
|
||||
)}
|
||||
source={`
|
||||
<div style="display: flex;">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Sidebar -->
|
||||
<aside style="width: 30%;">
|
||||
<aside class="sidebar">
|
||||
...
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<main style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
|
||||
/* Make it scrollable */
|
||||
overflow: auto;
|
||||
">
|
||||
<main class="main">
|
||||
...
|
||||
</main>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 30%;
|
||||
}
|
||||
.main {
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
|
||||
/* Make it scrollable */
|
||||
overflow: auto;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,116 +20,122 @@ const Details: React.FC<{}> = () => {
|
||||
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
|
||||
<div style={{ flex: '0 0 50%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
|
||||
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
|
||||
<div style={{ flex: '0 0 25%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<BrowserFrame
|
||||
html={`
|
||||
<!-- Row -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
">
|
||||
<div class="row">
|
||||
<!--Cell with given width. Replace 25% with whatever you want -->
|
||||
<div style="
|
||||
flex: 0 0 25%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">25%</div>
|
||||
<div class="cell width-1/4">25%</div>
|
||||
|
||||
<!-- Cell that takes remaining width -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">
|
||||
<div class="cell width-fill">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.row {
|
||||
display: flex;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.cell {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/* Cell with given width. Replace 25% with whatever you want */
|
||||
.cell.width-1/4 {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
.cell.width-fill {
|
||||
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 style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
|
||||
<div style={{ flex: '0 0 50%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
|
||||
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
|
||||
<div style={{ flex: '0 0 25%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
||||
|
||||
@@ -21,75 +21,82 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Left side -->
|
||||
<!-- Width based on the current value -->
|
||||
<div class="container__left" style="width: 20%"></div>
|
||||
|
||||
<!-- Circle -->
|
||||
<div class="container__circle"></div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="container__right"></div>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Size */
|
||||
height: 32px;
|
||||
">
|
||||
<!-- Left side -->
|
||||
<div style="
|
||||
/* Width based on the current value */
|
||||
height: 2px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
"></div>
|
||||
.container__left {
|
||||
height: 2px;
|
||||
|
||||
<!-- Circle -->
|
||||
<div style="
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
.container__circle {
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
"></div>
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
<!-- Right side -->
|
||||
<div style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
"></div>
|
||||
</div>
|
||||
.container__right {
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -26,109 +26,113 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
marginRight: '4px',
|
||||
padding: '4px',
|
||||
width: '100px',
|
||||
}}
|
||||
value={value}
|
||||
onChange={change}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
flex: 1,
|
||||
padding: '4px 4px 2px 4px',
|
||||
}}
|
||||
onClick={increase}
|
||||
>
|
||||
<Triangle size={6} corner="t" />
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
flex: 1,
|
||||
padding: '2px 4px 4px 4px',
|
||||
}}
|
||||
onClick={decrease}
|
||||
>
|
||||
<Triangle size={6} corner="b" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
border-color: transparent;
|
||||
margin-right: 4px;
|
||||
padding: 4px;
|
||||
width: 100px;
|
||||
" />
|
||||
<input type="text" class="input" />
|
||||
|
||||
<!-- Buttons container -->
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="buttons">
|
||||
<!-- Up button -->
|
||||
<button style="
|
||||
border-color: transparent;
|
||||
/* Make buttons have the same height */
|
||||
flex: 1,
|
||||
">
|
||||
<button class="button">
|
||||
...
|
||||
</button>
|
||||
|
||||
<!-- Down button -->
|
||||
<button style="
|
||||
border-color: transparent;
|
||||
/* Make buttons have the same height */
|
||||
flex: 1,
|
||||
">
|
||||
<button class="button">
|
||||
...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-color: transparent;
|
||||
margin-right: 4px;
|
||||
padding: 4px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
/* Content is centered vertically */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-color: transparent;
|
||||
/* Make buttons have the same height */
|
||||
flex: 1,
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
marginRight: '4px',
|
||||
padding: '4px',
|
||||
width: '100px',
|
||||
}}
|
||||
value={value}
|
||||
onChange={change}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
flex: 1,
|
||||
padding: '4px 4px 2px 4px',
|
||||
}}
|
||||
onClick={increase}
|
||||
>
|
||||
<Triangle size={6} corner="t" />
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
flex: 1,
|
||||
padding: '2px 4px 4px 4px',
|
||||
}}
|
||||
onClick={decrease}
|
||||
>
|
||||
<Triangle size={6} corner="b" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,38 +21,21 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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>
|
||||
)}
|
||||
source={`
|
||||
<ul style="
|
||||
html={`
|
||||
<ul class="container">
|
||||
<!-- Navigation item -->
|
||||
<li>
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
|
||||
<!-- Navigation item that sticks to the right -->
|
||||
<li class="item-right">
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
</ul>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -60,22 +43,43 @@ const Details: React.FC<{}> = () => {
|
||||
/* Reset styles */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
">
|
||||
<!-- Navigation item -->
|
||||
<li>
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
}
|
||||
|
||||
<!-- Navigation item that sticks to the right -->
|
||||
<li style="
|
||||
/* Sticks to the right */
|
||||
margin-left: auto;
|
||||
">
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
</ul>
|
||||
.item-right {
|
||||
/* Sticks to the right */
|
||||
margin-left: auto;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -22,51 +22,58 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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: '16px' }}><Circle size={128} /></div>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</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>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="display: flex;">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Left content -->
|
||||
<div style="flex: 1;">
|
||||
<div class="half">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Right content -->
|
||||
<div style="flex: 1;">
|
||||
<div class="half">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.half {
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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: '16px' }}><Circle size={128} /></div>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</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>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,52 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '250px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(5).fill(0).map((_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `rotate(${5 * (index + 1)}deg)`,
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the stacked cards */
|
||||
position: relative;
|
||||
@@ -96,7 +51,52 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '250px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(5).fill(0).map((_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `rotate(${5 * (index + 1)}deg)`,
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card]} />
|
||||
|
||||
@@ -19,39 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
|
||||
backgroundPosition: '-5px -5px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '10px 10px',
|
||||
height: '200px',
|
||||
padding: '5px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Background */
|
||||
background-color: #ccc;
|
||||
@@ -73,7 +41,39 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
|
||||
backgroundPosition: '-5px -5px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '10px 10px',
|
||||
height: '200px',
|
||||
padding: '5px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,34 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||
{random(1000, 9999).toLocaleString()}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||
stars
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -76,7 +49,34 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||
{random(1000, 9999).toLocaleString()}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||
stars
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#4299e1',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
marginRight: '8px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -86,7 +52,41 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#4299e1',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
marginRight: '8px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -29,79 +29,22 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
onClick={decrease}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
onClick={increase}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Minus button -->
|
||||
<button class="button">-</button>
|
||||
|
||||
<!-- Input container -->
|
||||
<div class="input-container">
|
||||
<input type="text" class="input" />
|
||||
</div>
|
||||
|
||||
<!-- Plus button -->
|
||||
<button class="button">+</button>
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
@@ -110,40 +53,99 @@ const Details: React.FC<{}> = () => {
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 128px;
|
||||
">
|
||||
<!-- Minus button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Size */
|
||||
width: 32px;
|
||||
">-</button>
|
||||
.button {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
<!-- Input container -->
|
||||
<div style="flex: 1">
|
||||
<input type="text" style="
|
||||
/* Take full size of its container */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
" />
|
||||
</div>
|
||||
/* Size */
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
<!-- Plus button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.input-container {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
/* Size */
|
||||
width: 32px;
|
||||
">+</button>
|
||||
</div>
|
||||
.input {
|
||||
/* Take full size of its container */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
onClick={decrease}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
onClick={increase}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -24,55 +24,64 @@ const Details: React.FC<{}> = () => {
|
||||
The footer always sticks to the bottom if the main content is short.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ flexGrow: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
">
|
||||
<header style="flex-shrink: 0;">
|
||||
html={`
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
...
|
||||
</header>
|
||||
<main style="flex-grow: 1;">
|
||||
<main class="main">
|
||||
...
|
||||
</main>
|
||||
<footer style="flex-shrink: 0;">
|
||||
<footer class="footer">
|
||||
...
|
||||
</footer>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.header,
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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 style={{ flexGrow: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,33 +25,9 @@ const Details: React.FC<{}> = () => {
|
||||
Try to scroll the main content to see the header sticks to the top of page.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</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>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div>
|
||||
<header style="
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
">
|
||||
<header class="header">
|
||||
...
|
||||
</header>
|
||||
<main>
|
||||
@@ -59,7 +35,33 @@ const Details: React.FC<{}> = () => {
|
||||
</main>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.header {
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -23,56 +23,9 @@ const Details: React.FC<{}> = () => {
|
||||
Try to scroll the main content to see each section sticks to the top of page.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
overflow: 'scroll',
|
||||
}}
|
||||
>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
">
|
||||
<section style="
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
...
|
||||
</section>
|
||||
|
||||
@@ -80,7 +33,57 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
.section {
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
overflow: 'scroll',
|
||||
}}
|
||||
>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
|
||||
|
||||
@@ -27,104 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
Try to scroll the main content of table horizontally to see the first column sticks to the left.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={(
|
||||
index === 0
|
||||
? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
}
|
||||
: {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
{
|
||||
index === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td
|
||||
key={col}
|
||||
style={(
|
||||
col === 0 ? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
} : {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
col === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -149,7 +52,104 @@ const Details: React.FC<{}> = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={(
|
||||
index === 0
|
||||
? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
}
|
||||
: {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
{
|
||||
index === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td
|
||||
key={col}
|
||||
style={(
|
||||
col === 0 ? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
} : {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
col === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
|
||||
|
||||
@@ -25,77 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
Try to scroll the main content of table to see the header sticks to the top.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(3).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#ddd',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(3).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td key={col} style={{ padding: '16px' }}>
|
||||
<Block numberOfBlocks={3} />
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -120,7 +50,77 @@ const Details: React.FC<{}> = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(3).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#ddd',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(3).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td key={col} style={{ padding: '16px' }}>
|
||||
<Block numberOfBlocks={3} />
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -27,49 +27,16 @@ const Details: React.FC<{}> = () => {
|
||||
the checkbox will be checked even though it's hidden.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="checkbox-switch"
|
||||
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
|
||||
id="checkbox-switch"
|
||||
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>
|
||||
)}
|
||||
source={`
|
||||
<label style="
|
||||
html={`
|
||||
<label class="label">
|
||||
<input type="checkbox" class="input" />
|
||||
|
||||
<!-- Circle -->
|
||||
<div class="circle"></div>
|
||||
</label>
|
||||
`}
|
||||
css={`
|
||||
.label {
|
||||
display: flex;
|
||||
|
||||
/* Rounded border */
|
||||
@@ -88,26 +55,67 @@ const Details: React.FC<{}> = () => {
|
||||
border: 1px solid #357edd;
|
||||
/* Push the circle to the right */
|
||||
justify-content: flex-end;
|
||||
">
|
||||
<!-- Hide the input -->
|
||||
<input type="checkbox" style="display: none" />
|
||||
}
|
||||
|
||||
<!-- Circle -->
|
||||
<div style="
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
.input {
|
||||
/* Hide the input */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Size */
|
||||
width: 32px;
|
||||
.circle {
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
background-color: #FFF;
|
||||
/* Size */
|
||||
width: 32px;
|
||||
|
||||
/* OFF status */
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
" />
|
||||
</label>
|
||||
background-color: #FFF;
|
||||
|
||||
/* OFF status */
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="checkbox-switch"
|
||||
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
|
||||
id="checkbox-switch"
|
||||
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>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -46,73 +46,79 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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 style={{ width: '64px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={1}>
|
||||
<div style={{ width: '32px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={2}>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
html={`
|
||||
<div class="tabs">
|
||||
<!-- Active tab -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
/* Hide the bottom border */
|
||||
border-bottom-color: transparent;
|
||||
|
||||
/* Border radius */
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
">
|
||||
<div class="tab--active">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Inactive tab -->
|
||||
<div style="
|
||||
/* Has only the bottom border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<div class="tab--inactive">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.tabs {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab--active {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
/* Hide the bottom border */
|
||||
border-bottom-color: transparent;
|
||||
|
||||
/* Border radius */
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.tab--inactive {
|
||||
/* Has only the bottom border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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 style={{ width: '64px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={1}>
|
||||
<div style={{ width: '32px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={2}>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,36 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '2px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '0 50% 50% 50%',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
transform: 'rotate(45deg)',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ transform: 'rotate(-45deg)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -78,7 +49,36 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '2px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '0 50% 50% 50%',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
transform: 'rotate(45deg)',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ transform: 'rotate(-45deg)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,77 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '2px solid #aaa',
|
||||
height: '100%',
|
||||
left: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
<ul
|
||||
style={{
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '80%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={15} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the left vertical line */
|
||||
position: relative;
|
||||
@@ -160,7 +90,77 @@ const Details: React.FC<{}> = () => {
|
||||
</ul>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '2px solid #aaa',
|
||||
height: '100%',
|
||||
left: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
<ul
|
||||
style={{
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '80%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={15} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,80 +22,10 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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={{
|
||||
fill: 'none',
|
||||
height: '24px',
|
||||
stroke: "rgba(0, 0, 0, 0.4)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '24px',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={
|
||||
visible
|
||||
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
|
||||
: `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- Text input -->
|
||||
<input
|
||||
type="text"
|
||||
style="
|
||||
border-color: transparent;
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
"
|
||||
/>
|
||||
<input type="text" class="input" />
|
||||
|
||||
<!-- Toggle button sticks to the right -->
|
||||
<button>
|
||||
@@ -103,7 +33,78 @@ const Details: React.FC<{}> = () => {
|
||||
</button>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.input {
|
||||
border-color: transparent;
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<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={{
|
||||
fill: 'none',
|
||||
height: '24px',
|
||||
stroke: "rgba(0, 0, 0, 0.4)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '24px',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={
|
||||
visible
|
||||
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
|
||||
: `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -27,39 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouser over the main element to see the tooltip.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip"
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip-content"
|
||||
style={{
|
||||
padding: '8px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="p-tooltip-arrow" />
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-tooltip {
|
||||
/* Used to position the arrow */
|
||||
@@ -126,7 +94,39 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip"
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip-content"
|
||||
style={{
|
||||
padding: '8px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="p-tooltip-arrow" />
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
||||
|
||||
@@ -20,147 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '0px 8px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 0px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 0px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 8px 0px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Up triangle button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
@@ -261,7 +121,147 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '0px 8px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 0px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 0px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 8px 0px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
||||
|
||||
@@ -23,68 +23,20 @@ const Details: React.FC<{}> = () => {
|
||||
You can click the button to choose a file.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '128px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
opacity: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '24',
|
||||
stroke: "rgba(0, 0, 0, 0.4)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '24',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
|
||||
c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
|
||||
H18.5z
|
||||
M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
html={`
|
||||
<div class="container">
|
||||
<!-- The real file input -->
|
||||
<input type="file" class="input" />
|
||||
|
||||
<!-- The upload icon -->
|
||||
<div class="icon">...</div>
|
||||
|
||||
<!-- The label -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={`
|
||||
.container {
|
||||
/* Used to position the input */
|
||||
position: relative;
|
||||
|
||||
@@ -94,31 +46,84 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<!-- The real file input -->
|
||||
<input
|
||||
type="file"
|
||||
style="
|
||||
/* Take the full size */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Make it transparent */
|
||||
opacity: 0;
|
||||
"
|
||||
/>
|
||||
.input {
|
||||
/* Take the full size */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
<!-- The upload icon -->
|
||||
<div style="margin-right: 8px">...</div>
|
||||
/* Make it transparent */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
<!-- The label -->
|
||||
...
|
||||
</div>
|
||||
.icon {
|
||||
margin-right: 8px
|
||||
}
|
||||
`}
|
||||
/>
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '128px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
opacity: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '24',
|
||||
stroke: "rgba(0, 0, 0, 0.4)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '24',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
|
||||
c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
|
||||
H18.5z
|
||||
M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -19,103 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: "rgba(0, 0, 0, 0.5)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: '#e7040f',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the validation icon */
|
||||
position: relative;
|
||||
@@ -148,7 +52,103 @@ const Details: React.FC<{}> = () => {
|
||||
</i>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: "rgba(0, 0, 0, 0.5)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: '#e7040f',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -24,67 +24,7 @@ const Details: React.FC<{}> = () => {
|
||||
In this pattern, the video is displayed in the background.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
width: '100%',
|
||||
}}
|
||||
autoPlay={true}
|
||||
loop={true}
|
||||
muted={true}
|
||||
playsInline={true}
|
||||
src="/assets/video-background-demo.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the video and content */
|
||||
position: relative;
|
||||
@@ -141,7 +81,67 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
width: '100%',
|
||||
}}
|
||||
autoPlay={true}
|
||||
loop={true}
|
||||
muted={true}
|
||||
playsInline={true}
|
||||
src="/assets/video-background-demo.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -20,66 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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)',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
color: 'rgba(0, 0, 0, 0.2)',
|
||||
fontSize: '3rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
transform: 'rotate(-45deg)',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
Draft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the watermark */
|
||||
position: relative;
|
||||
@@ -124,7 +65,66 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<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)',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
color: 'rgba(0, 0, 0, 0.2)',
|
||||
fontSize: '3rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
transform: 'rotate(-45deg)',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
Draft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,165 +22,169 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
html={`
|
||||
<div class="wizard">
|
||||
<!-- Step -->
|
||||
<div style="
|
||||
/* Make all steps have the same width */
|
||||
flex: 1;
|
||||
">
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<div class="step">
|
||||
<div class="step__dot">
|
||||
<!-- The left connector -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/*
|
||||
For the first step, you might need to set it to transparent background:
|
||||
background-color: transparent;
|
||||
*/
|
||||
" />
|
||||
<div class="step__connector"></div>
|
||||
|
||||
<!-- The step number -->
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Rounded border */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 9999px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* OPTIONAL: Spacing between it and connectors */
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
">
|
||||
<div class="step__number">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The right connector -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/*
|
||||
For the last step, you might need to set it to transparent background:
|
||||
background-color: transparent;
|
||||
*/
|
||||
" />
|
||||
<div class="step__connector"></div>
|
||||
</div>
|
||||
|
||||
<!-- Title of step -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Repeat other steps -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.wizard {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.step {
|
||||
/* Make all steps have the same width */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step__dot {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.step__connector {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.step:first-child .step__connector,
|
||||
.step:last-child .step__connector {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.step__number {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Rounded border */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 9999px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* OPTIONAL: Spacing between it and connectors */
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', width: '80%' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -9,18 +9,21 @@ import SampleCode from '../components/SampleCode';
|
||||
import './browserFrame.css';
|
||||
|
||||
interface BrowserFrameProps {
|
||||
content: React.ReactNode;
|
||||
source?: string;
|
||||
css: string;
|
||||
html: string;
|
||||
}
|
||||
|
||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
|
||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
|
||||
return (
|
||||
<div className="demo">
|
||||
<div className="demo__source">
|
||||
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
|
||||
<div className="demo__html">
|
||||
<SampleCode fullHeight={true} lang="html" code={html} />
|
||||
</div>
|
||||
<div className="demo__css">
|
||||
<SampleCode fullHeight={true} lang="css" code={css} />
|
||||
</div>
|
||||
<div className="demo__live">
|
||||
{content}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,12 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.demo__source,
|
||||
.demo__live {
|
||||
height: 32rem;
|
||||
}
|
||||
.demo__css,
|
||||
.demo__html {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
height: 16rem;
|
||||
overflow: auto;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 26 KiB |
Reference in New Issue
Block a user