mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-24 11:16:27 +02:00
Add CSS panel
This commit is contained in:
Phuoc Nguyen
@@ -18,4 +18,4 @@ gtag('js', new Date());
|
|||||||
gtag('config', 'UA-139616701-3');
|
gtag('config', 'UA-139616701-3');
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -64,89 +64,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Container -->
|
<!-- Container -->
|
||||||
<div style="
|
<div class="container">
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
<!-- Each accordion item -->
|
<!-- Each accordion item -->
|
||||||
<div style="
|
<div class="item">
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- Heading -->
|
<!-- Heading -->
|
||||||
<div style="
|
<div class="header">
|
||||||
/* Center the content horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 16px;
|
|
||||||
">
|
|
||||||
<!-- The toggle icon -->
|
<!-- The toggle icon -->
|
||||||
<div style="margin-right: 12px;">...</div>
|
<div class="toggle">...</div>
|
||||||
|
|
||||||
<!-- The title -->
|
<!-- The title -->
|
||||||
<div style="
|
<div class="title">
|
||||||
flex: 1; /* Take remaining width */
|
|
||||||
">
|
|
||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- The content -->
|
<!-- The content -->
|
||||||
<div style="
|
<div class="content">
|
||||||
/* For selected item */
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
/* For not selected item */
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
padding: 16px;
|
|
||||||
">
|
|
||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -155,7 +90,86 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
||||||
|
|||||||
@@ -20,151 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Up arrow button -->
|
<!-- Up arrow button -->
|
||||||
<button style="
|
<button style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
@@ -281,7 +137,152 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
||||||
|
|||||||
@@ -40,24 +40,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
">
|
">
|
||||||
@@ -87,7 +70,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Rounded border */
|
/* Rounded border */
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@@ -82,7 +41,48 @@ 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: '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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
||||||
|
|||||||
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -68,7 +39,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',
|
||||||
|
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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
||||||
|
|||||||
@@ -20,29 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
/* Content is centered vertically */
|
/* Content is centered vertically */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -58,7 +36,29 @@ 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: '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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,36 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<button style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -65,7 +36,36 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,38 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -77,7 +46,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
||||||
|
|||||||
@@ -22,37 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
||||||
|
|||||||
@@ -21,24 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -47,7 +30,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,20 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<InputChip>CSS</InputChip>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -64,7 +51,20 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<InputChip>CSS</InputChip>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
||||||
|
|||||||
@@ -56,32 +56,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -133,7 +108,32 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<button style="
|
<button style="
|
||||||
/* Reset */
|
/* Reset */
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@@ -113,7 +67,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
||||||
|
|||||||
@@ -22,40 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Banner is displayed at the bottom */
|
/* Banner is displayed at the bottom */
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -80,7 +47,40 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -22,51 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -109,7 +65,51 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Background color */
|
/* Background color */
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
@@ -53,7 +35,25 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
||||||
|
|||||||
@@ -70,53 +70,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<label style="
|
||||||
/* Center the content horizontally */
|
/* Center the content horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -161,7 +115,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -71,53 +71,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<label style="
|
||||||
/* Center the content horizontally */
|
/* Center the content horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -164,7 +118,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,46 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the diagonal area */
|
/* Used to position the diagonal area */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -90,7 +51,46 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
||||||
|
|||||||
@@ -22,43 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -80,7 +44,43 @@ 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: '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>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -23,58 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -100,7 +49,58 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div>...</div>
|
<div>...</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>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -44,35 +44,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<ul style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -102,7 +74,35 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,40 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
This pattern is also known as off-canvas.
|
This pattern is also known as off-canvas.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
/* Container takes full size */
|
/* Container takes full size */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -98,7 +65,40 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -63,7 +34,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: '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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<style>
|
<style>
|
||||||
/* Styles for the first letter */
|
/* Styles for the first letter */
|
||||||
.p-drop-cap:first-letter {
|
.p-drop-cap:first-letter {
|
||||||
@@ -64,7 +43,28 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,76 +28,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Move the mouse over the button to see the dropdown.
|
Move the mouse over the button to see the dropdown.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
/* Hide the dropdown's content by default -->
|
/* Hide the dropdown's content by default -->
|
||||||
.dropdown-content {
|
.dropdown-content {
|
||||||
@@ -142,7 +73,76 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -23,41 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Fading a long section to indicate there is more content.
|
Fading a long section to indicate there is more content.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the faded element */
|
/* Used to position the faded element */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -89,7 +55,41 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,113 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -174,7 +68,113 @@ const Details: React.FC<{}> = () => {
|
|||||||
<!-- Repeated items -->
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
||||||
|
|||||||
@@ -23,34 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Feature item -->
|
<!-- Feature item -->
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -80,7 +53,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
<!-- Repeated items -->
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||||
|
|||||||
@@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Fixed at the middle of side -->
|
<!-- Fixed at the middle of side -->
|
||||||
<div style="
|
<div style="
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -53,7 +32,28 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -24,53 +24,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Type something in the input to see how the label is shown up.
|
Type something in the input to see how the label is shown up.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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>
|
<style>
|
||||||
.p-floating-container {
|
.p-floating-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -103,7 +57,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
<label>Placeholder</label>
|
<label>Placeholder</label>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,34 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -66,7 +39,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||||
|
|||||||
@@ -20,80 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
/* Full screen overlay */
|
/* Full screen overlay */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -123,7 +50,80 @@ const Details: React.FC<{}> = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,58 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -111,7 +60,58 @@ const Details: React.FC<{}> = () => {
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,44 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -92,7 +55,44 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -20,132 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Add-on prepended -->
|
<!-- Add-on prepended -->
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -228,7 +103,132 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -56,31 +56,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<kbd style="
|
<kbd style="
|
||||||
/* Background and color */
|
/* Background and color */
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
@@ -96,7 +72,31 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</kbd>
|
</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>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -19,38 +19,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Lined background */
|
/* Lined background */
|
||||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
||||||
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Align sub-items to top */
|
/* Align sub-items to top */
|
||||||
align-items: start;
|
align-items: start;
|
||||||
@@ -68,7 +47,28 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,71 +28,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Move the mouse over the second navigation item to see the mega menu.
|
Move the mouse over the second navigation item to see the mega menu.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
.p-mega-menu-container {
|
.p-mega-menu-container {
|
||||||
/* Used to position the mega menu */
|
/* Used to position the mega menu */
|
||||||
@@ -142,7 +78,71 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||||
|
|||||||
@@ -24,120 +24,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -196,7 +83,120 @@ 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: '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>
|
</div>
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
patterns={[
|
patterns={[
|
||||||
|
|||||||
@@ -27,57 +27,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
represent the button for closing the modal.
|
represent the button for closing the modal.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Border */
|
/* Border */
|
||||||
border: 1px solid rgba(0, 0, 0.3);
|
border: 1px solid rgba(0, 0, 0.3);
|
||||||
@@ -111,7 +61,57 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,38 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Hover on the Patterns → Navigation to see the sub dropdowns.
|
Hover on the Patterns → Navigation to see the sub dropdowns.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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>
|
<style>
|
||||||
/* The root */
|
/* The root */
|
||||||
.p-nested-dropdowns {
|
.p-nested-dropdowns {
|
||||||
@@ -144,7 +113,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
<li>About</li>
|
<li>About</li>
|
||||||
</ul>
|
</ul>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
||||||
|
|||||||
@@ -26,46 +26,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
represent the button for closing the notification.
|
represent the button for closing the notification.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -77,7 +38,46 @@ 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',
|
||||||
|
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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,55 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the overlay */
|
/* Used to position the overlay */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -101,7 +53,55 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,95 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -144,7 +56,95 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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',
|
||||||
|
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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Border */
|
/* Border */
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
@@ -431,7 +248,190 @@ 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',
|
||||||
|
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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
||||||
|
|||||||
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -80,7 +46,41 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -20,59 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -85,7 +33,59 @@ const Details: React.FC<{}> = () => {
|
|||||||
<a>..</a>
|
<a>..</a>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,88 +28,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
indicate the most popular option.
|
indicate the most popular option.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Content is centered horizontally */
|
/* Content is centered horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -151,7 +70,88 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||||
|
|||||||
@@ -25,45 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Colors */
|
/* Colors */
|
||||||
background-color: rgba(0, 0, 0, .1);
|
background-color: rgba(0, 0, 0, .1);
|
||||||
@@ -92,7 +54,45 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -40,38 +40,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- A property item -->
|
<!-- A property item -->
|
||||||
<dl style="
|
<dl style="
|
||||||
/* Content is center horizontally */
|
/* Content is center horizontally */
|
||||||
@@ -97,7 +66,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
<dd>...</dd>
|
<dd>...</dd>
|
||||||
</dl>
|
</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>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -60,64 +60,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Each question and answer item -->
|
<!-- Each question and answer item -->
|
||||||
<div style="
|
<div style="
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
@@ -138,7 +81,64 @@ const Details: React.FC<{}> = () => {
|
|||||||
<!-- Answer -->
|
<!-- Answer -->
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
||||||
|
|||||||
@@ -80,21 +80,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -56,39 +56,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<style>
|
<style>
|
||||||
.p-radio-button-group label {
|
.p-radio-button-group label {
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
@@ -144,7 +112,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
||||||
|
|||||||
@@ -24,81 +24,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Container -->
|
<!-- Container -->
|
||||||
<div style="
|
<div style="
|
||||||
background-color: rgba(0, 0, 0, .1);
|
background-color: rgba(0, 0, 0, .1);
|
||||||
@@ -126,7 +52,81 @@ 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',
|
||||||
|
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>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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>
|
<style>
|
||||||
.p-rating {
|
.p-rating {
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
@@ -88,7 +70,25 @@ Note that we use \`flex-direction: row-reverse\` on the container
|
|||||||
<button class="p-rating-star">★</button>
|
<button class="p-rating-star">★</button>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,125 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
the cursors which indicate the associated side can be resized.
|
the cursors which indicate the associated side can be resized.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Border */
|
/* Border */
|
||||||
border: 1px dashed rgba(0, 0, 0, 0.3);
|
border: 1px dashed rgba(0, 0, 0, 0.3);
|
||||||
@@ -305,7 +187,125 @@ 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 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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,76 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -168,7 +99,76 @@ 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',
|
||||||
|
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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
||||||
|
|||||||
@@ -21,78 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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;">
|
<div style="display: flex;">
|
||||||
<!-- Column -->
|
<!-- Column -->
|
||||||
<div style="
|
<div style="
|
||||||
@@ -123,7 +52,78 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,65 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -102,7 +44,65 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Content is centered horizontally */
|
/* Content is centered horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -92,7 +51,48 @@ 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: '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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,37 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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;">
|
<div style="display: flex;">
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<aside style="width: 30%;">
|
<aside style="width: 30%;">
|
||||||
@@ -70,7 +40,37 @@ const Details: React.FC<{}> = () => {
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,91 +20,8 @@ const Details: React.FC<{}> = () => {
|
|||||||
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
|
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Row -->
|
<!-- Row -->
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -129,7 +46,90 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
||||||
|
|||||||
@@ -21,32 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
/* Content is centered horizontally */
|
/* Content is centered horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -89,7 +64,32 @@ const Details: React.FC<{}> = () => {
|
|||||||
"></div>
|
"></div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -26,68 +26,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -128,7 +67,68 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,37 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<ul style="
|
||||||
/* Content is centered horizontally */
|
/* Content is centered horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -22,38 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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;">
|
<div style="display: flex;">
|
||||||
<!-- Left content -->
|
<!-- Left content -->
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,52 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the stacked cards */
|
/* Used to position the stacked cards */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -96,7 +51,52 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Card]} />
|
<RelatedPatterns patterns={[Pattern.Card]} />
|
||||||
|
|||||||
@@ -19,39 +19,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Background */
|
/* Background */
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
@@ -73,7 +41,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,34 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -76,7 +49,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -86,7 +52,41 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -29,78 +29,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -143,7 +72,78 @@ const Details: React.FC<{}> = () => {
|
|||||||
">+</button>
|
">+</button>
|
||||||
</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: '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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -24,38 +24,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
The footer always sticks to the bottom if the main content is short.
|
The footer always sticks to the bottom if the main content is short.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -72,7 +41,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,27 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Try to scroll the main content to see the header sticks to the top of page.
|
Try to scroll the main content to see the header sticks to the top of page.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div>
|
<div>
|
||||||
<header style="
|
<header style="
|
||||||
/* Stick to the top */
|
/* Stick to the top */
|
||||||
@@ -59,7 +39,27 @@ const Details: React.FC<{}> = () => {
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -23,43 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Try to scroll the main content to see each section sticks to the top of page.
|
Try to scroll the main content to see each section sticks to the top of page.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
@@ -80,7 +44,43 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
|
<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.
|
Try to scroll the main content of table horizontally to see the first column sticks to the left.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -149,7 +52,104 @@ const Details: React.FC<{}> = () => {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
|
<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.
|
Try to scroll the main content of table to see the header sticks to the top.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -120,7 +50,77 @@ const Details: React.FC<{}> = () => {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -27,48 +27,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
the checkbox will be checked even though it's hidden.
|
the checkbox will be checked even though it's hidden.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<label style="
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -107,7 +66,48 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</label>
|
</label>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -46,43 +46,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -112,7 +76,43 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,36 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -78,7 +49,36 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,77 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the left vertical line */
|
/* Used to position the left vertical line */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -160,7 +90,77 @@ const Details: React.FC<{}> = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,65 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
@@ -103,7 +45,65 @@ const Details: React.FC<{}> = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -27,39 +27,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Move the mouser over the main element to see the tooltip.
|
Move the mouser over the main element to see the tooltip.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<style>
|
<style>
|
||||||
.p-tooltip {
|
.p-tooltip {
|
||||||
/* Used to position the arrow */
|
/* Used to position the arrow */
|
||||||
@@ -126,7 +94,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
||||||
|
|||||||
@@ -20,147 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<!-- Up triangle button -->
|
<!-- Up triangle button -->
|
||||||
<button style="
|
<button style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
@@ -261,7 +121,147 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
||||||
|
|||||||
@@ -23,67 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
You can click the button to choose a file.
|
You can click the button to choose a file.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
/* Used to position the input */
|
/* Used to position the input */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -118,7 +58,67 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -19,103 +19,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the validation icon */
|
/* Used to position the validation icon */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -148,7 +52,103 @@ const Details: React.FC<{}> = () => {
|
|||||||
</i>
|
</i>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -24,67 +24,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
In this pattern, the video is displayed in the background.
|
In this pattern, the video is displayed in the background.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the video and content */
|
/* Used to position the video and content */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -141,7 +81,67 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -20,66 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Used to position the watermark */
|
/* Used to position the watermark */
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -124,7 +65,66 @@ 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)',
|
||||||
|
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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,100 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<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="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
">
|
">
|
||||||
@@ -180,7 +87,100 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -9,18 +9,21 @@ import SampleCode from '../components/SampleCode';
|
|||||||
import './browserFrame.css';
|
import './browserFrame.css';
|
||||||
|
|
||||||
interface BrowserFrameProps {
|
interface BrowserFrameProps {
|
||||||
content: React.ReactNode;
|
css: string;
|
||||||
source?: string;
|
html: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
|
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
|
||||||
return (
|
return (
|
||||||
<div className="demo">
|
<div className="demo">
|
||||||
<div className="demo__source">
|
<div className="demo__html">
|
||||||
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
|
<SampleCode fullHeight={true} lang="html" code={html} />
|
||||||
|
</div>
|
||||||
|
<div className="demo__css">
|
||||||
|
<SampleCode fullHeight={true} lang="css" code={css} />
|
||||||
</div>
|
</div>
|
||||||
<div className="demo__live">
|
<div className="demo__live">
|
||||||
{content}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -7,7 +7,12 @@
|
|||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
.demo__source,
|
|
||||||
.demo__live {
|
.demo__live {
|
||||||
height: 32rem;
|
height: 32rem;
|
||||||
}
|
}
|
||||||
|
.demo__css,
|
||||||
|
.demo__html {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
height: 16rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user