mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-07 14:46:38 +02:00
Add CSS panel
This commit is contained in:
Phuoc Nguyen
@@ -64,89 +64,24 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderBottomColor: 'transparent',
|
||||
borderRadius: '4px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Container -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 4px;
|
||||
">
|
||||
<div class="container">
|
||||
<!-- Each accordion item -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<div class="item">
|
||||
<!-- Heading -->
|
||||
<div style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
">
|
||||
<div class="header">
|
||||
<!-- The toggle icon -->
|
||||
<div style="margin-right: 12px;">...</div>
|
||||
<div class="toggle">...</div>
|
||||
|
||||
<!-- The title -->
|
||||
<div style="
|
||||
flex: 1; /* Take remaining width */
|
||||
">
|
||||
<div class="title">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The content -->
|
||||
<div style="
|
||||
/* For selected item */
|
||||
display: block;
|
||||
|
||||
/* For not selected item */
|
||||
display: none;
|
||||
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 16px;
|
||||
">
|
||||
<div class="content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,7 +90,86 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
.container {
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
cursor: pointer;
|
||||
padding: 16px;
|
||||
}
|
||||
.toggle {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.title {
|
||||
/* Take remaining width */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* For not selected item */
|
||||
display: none;
|
||||
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
padding: 16px;
|
||||
}
|
||||
.content.selected {
|
||||
/* For selected item */
|
||||
display: block;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderBottomColor: 'transparent',
|
||||
borderRadius: '4px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
</Item>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
||||
|
||||
@@ -20,151 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Up arrow button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
@@ -281,7 +137,152 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
/>
|
||||
css={`
|
||||
`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateY(-25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '12px',
|
||||
transform: 'translateX(25%) rotate(45deg)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
||||
|
||||
@@ -40,24 +40,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
@@ -87,7 +70,24 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '64px',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '100%',
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
|
||||
M5,20.5
|
||||
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Rounded border */
|
||||
border-radius: 50%;
|
||||
@@ -82,7 +41,48 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '64px',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '100%',
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
|
||||
M5,20.5
|
||||
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
||||
|
||||
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
fontSize: '20px',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -68,7 +39,36 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
fontSize: '20px',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
||||
|
||||
@@ -20,29 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<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={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
@@ -58,7 +36,29 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '64px' }}><Rectangle height={16} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,36 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<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={`
|
||||
html={`
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -65,7 +36,36 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,38 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
@@ -77,7 +46,38 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
||||
|
||||
@@ -22,37 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={150} />
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={150} />
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
||||
|
||||
@@ -21,24 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -47,7 +30,24 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,20 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<InputChip>CSS</InputChip>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -64,7 +51,20 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<InputChip>CSS</InputChip>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
||||
|
||||
@@ -56,32 +56,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<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={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -133,7 +108,32 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<button style="
|
||||
/* Reset */
|
||||
background-color: transparent;
|
||||
@@ -113,7 +67,53 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</button>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
||||
|
||||
@@ -22,40 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
left: 0,
|
||||
padding: '8px',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '12px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ width: '96px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Banner is displayed at the bottom */
|
||||
bottom: 0;
|
||||
@@ -80,7 +47,40 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
left: 0,
|
||||
padding: '8px',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '12px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ width: '96px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -22,51 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -109,7 +65,51 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderBottomLeftRadius: '50% 40%',
|
||||
borderBottomRightRadius: '50% 40%',
|
||||
height: '50%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Background color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
@@ -53,7 +35,25 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderBottomLeftRadius: '50% 40%',
|
||||
borderBottomRightRadius: '50% 40%',
|
||||
height: '50%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
||||
|
||||
@@ -70,53 +70,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
@@ -161,7 +115,53 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -71,53 +71,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
@@ -164,7 +118,53 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,46 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '200px',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'skewY(-5deg)',
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div style={{ width: '60%' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the diagonal area */
|
||||
position: relative;
|
||||
@@ -90,7 +51,46 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '200px',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'skewY(-5deg)',
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div style={{ width: '60%' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
||||
|
||||
@@ -22,43 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
height: '32px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -80,7 +44,43 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
height: '32px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -23,58 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '400px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -100,7 +49,58 @@ const Details: React.FC<{}> = () => {
|
||||
<div>...</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '400px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ borderBottom: '1px dotted rgba(0, 0, 0, 0.3)', flex: 1, margin: '0 4px' }} />
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -44,35 +44,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<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={`
|
||||
html={`
|
||||
<ul style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -102,7 +74,35 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,40 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
This pattern is also known as off-canvas.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Container takes full size */
|
||||
height: 100%;
|
||||
@@ -98,7 +65,40 @@ 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: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,36 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px dashed rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '80%',
|
||||
justifyContent: 'center',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Block justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -63,7 +34,36 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px dashed rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '80%',
|
||||
justifyContent: 'center',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Block justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div className="p-drop-cap">
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
/* Styles for the first letter */
|
||||
.p-drop-cap:first-letter {
|
||||
@@ -64,7 +43,28 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div className="p-drop-cap">
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,76 +28,7 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouse over the button to see the dropdown.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-dropdown"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
|
||||
<Triangle size={8} corner='b' />
|
||||
</button>
|
||||
|
||||
<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={`
|
||||
html={`
|
||||
<style>
|
||||
/* Hide the dropdown's content by default -->
|
||||
.dropdown-content {
|
||||
@@ -142,7 +73,76 @@ const Details: React.FC<{}> = () => {
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -23,41 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
Fading a long section to indicate there is more content.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative', width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={50} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
|
||||
bottom: 0,
|
||||
height: '30px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the faded element */
|
||||
position: relative;
|
||||
@@ -89,7 +55,41 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative', width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={50} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
|
||||
bottom: 0,
|
||||
height: '30px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,113 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '12px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -174,7 +68,113 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '12px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={4} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
padding: '8px 0',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, marginRight: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
||||
|
||||
@@ -23,34 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Feature item -->
|
||||
<div style="
|
||||
display: flex;
|
||||
@@ -80,7 +53,34 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||
|
||||
@@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Fixed at the middle of side -->
|
||||
<div style="
|
||||
right: 0;
|
||||
@@ -53,7 +32,28 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -24,53 +24,7 @@ const Details: React.FC<{}> = () => {
|
||||
Type something in the input to see how the label is shown up.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-floating-container"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
padding: '0 1px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="floating-label-input"
|
||||
placeholder="Placeholder"
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
htmlFor="floating-label-input"
|
||||
style={{
|
||||
left: '8px',
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transition: 'all 200ms',
|
||||
}}
|
||||
>
|
||||
Placeholder
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-floating-container {
|
||||
position: relative;
|
||||
@@ -103,7 +57,53 @@ const Details: React.FC<{}> = () => {
|
||||
<label>Placeholder</label>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,34 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -66,7 +39,34 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||
|
||||
@@ -20,80 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Full screen overlay */
|
||||
height: 100%;
|
||||
@@ -123,7 +50,80 @@ const Details: React.FC<{}> = () => {
|
||||
</ul>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,58 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexGrow: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '25%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '20%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -111,7 +60,58 @@ const Details: React.FC<{}> = () => {
|
||||
</footer>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,44 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '50%',
|
||||
color: '#FFF',
|
||||
display: 'inline-block',
|
||||
fontSize: '24px',
|
||||
height: '48px',
|
||||
position: 'relative',
|
||||
verticalAlign: 'middle',
|
||||
width: '48px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
PN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
display: inline-block;
|
||||
@@ -92,7 +55,44 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '50%',
|
||||
color: '#FFF',
|
||||
display: 'inline-block',
|
||||
fontSize: '24px',
|
||||
height: '48px',
|
||||
position: 'relative',
|
||||
verticalAlign: 'middle',
|
||||
width: '48px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
PN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,132 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
marginBottom: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginRight: '1px',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
marginBottom: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginLeft: '1px',
|
||||
padding: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '40%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '20%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Add-on prepended -->
|
||||
<div style="
|
||||
display: flex;
|
||||
@@ -228,7 +103,132 @@ 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: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
marginBottom: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginRight: '1px',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
marginBottom: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginLeft: '1px',
|
||||
padding: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '40%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '20%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -56,31 +56,7 @@ const Details: React.FC<{}> = () => {
|
||||
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<kbd
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '4px',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
|
||||
color: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
⌘ + C
|
||||
</kbd>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<kbd style="
|
||||
/* Background and color */
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
@@ -96,7 +72,31 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</kbd>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<kbd
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '4px',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
|
||||
color: 'rgba(0, 0, 0, 0.7)',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
⌘ + C
|
||||
</kbd>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -19,38 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
|
||||
backgroundPositionY: '24px',
|
||||
backgroundSize: '100% 2em',
|
||||
height: '200px',
|
||||
lineHeight: '2em',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Lined background */
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
||||
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
|
||||
backgroundPositionY: '24px',
|
||||
backgroundSize: '100% 2em',
|
||||
height: '200px',
|
||||
lineHeight: '2em',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Align sub-items to top */
|
||||
align-items: start;
|
||||
@@ -68,7 +47,28 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,71 +28,7 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouse over the second navigation item to see the mega menu.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div className='p-mega-menu-container'>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
className='p-mega-menu-trigger'
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
width: '180px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', padding: '16px' }}>
|
||||
<div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
|
||||
<Triangle size={8} corner='b' />
|
||||
</div>
|
||||
<div className='p-mega-menu-content'>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={8} />
|
||||
</div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={6} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '16px',
|
||||
width: '120px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-mega-menu-container {
|
||||
/* Used to position the mega menu */
|
||||
@@ -142,7 +78,71 @@ const Details: React.FC<{}> = () => {
|
||||
</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>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||
|
||||
@@ -24,120 +24,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -196,7 +83,120 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
width: '40%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '30%' }}><Rectangle /></div>
|
||||
<div>Ctrl + X</div>
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '70%' }}><Rectangle /></div>
|
||||
<div>Ctrl + C</div>
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle /></div>
|
||||
<Circle />
|
||||
</div>
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
|
||||
<Circle />
|
||||
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<Circle />
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
|
||||
<div
|
||||
className="p-menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
<div>Ctrl + V</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns
|
||||
patterns={[
|
||||
|
||||
@@ -27,57 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
represent the button for closing the modal.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
width: '50%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
|
||||
<div style={{ width: '30%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0.3);
|
||||
@@ -111,7 +61,57 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
width: '50%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
|
||||
<div style={{ width: '30%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,38 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
Hover on the Patterns → Navigation to see the sub dropdowns.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul className="p-nested-dropdowns">
|
||||
<li>Home</li>
|
||||
<li>
|
||||
<div>Patterns</div>
|
||||
<ul>
|
||||
<li>Layout</li>
|
||||
<li>Input</li>
|
||||
<li>
|
||||
<div>Navigation</div>
|
||||
<ul>
|
||||
<li>Breadcrumb</li>
|
||||
<li>Dropdown</li>
|
||||
<li>Menu</li>
|
||||
<li>Nested dropdown</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Display</li>
|
||||
<li>Feedback</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Products</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
/* The root */
|
||||
.p-nested-dropdowns {
|
||||
@@ -144,7 +113,38 @@ const Details: React.FC<{}> = () => {
|
||||
<li>About</li>
|
||||
</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>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
||||
|
||||
@@ -26,46 +26,7 @@ const Details: React.FC<{}> = () => {
|
||||
represent the button for closing the notification.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderColor: 'transparent',
|
||||
color: 'rgba(0, 0, 0, .3)',
|
||||
display: 'flex',
|
||||
fontSize: '36px',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
marginRight: '1px',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -77,7 +38,46 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderColor: 'transparent',
|
||||
color: 'rgba(0, 0, 0, .3)',
|
||||
display: 'flex',
|
||||
fontSize: '36px',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
marginRight: '1px',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,55 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px solid #FFF',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Triangle backgroundColor='#FFF' corner='r' size={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the overlay */
|
||||
position: relative;
|
||||
@@ -101,7 +53,55 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '4px solid #FFF',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Triangle backgroundColor='#FFF' corner='r' size={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,95 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
@@ -144,7 +56,95 @@ 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',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '300px',
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '32px',
|
||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '32px',
|
||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -431,7 +248,190 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '300px',
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '32px',
|
||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '32px',
|
||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
||||
|
||||
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '64px',
|
||||
marginRight: '16px',
|
||||
position: 'relative',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '9999px',
|
||||
bottom: 0,
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -80,7 +46,41 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '64px',
|
||||
marginRight: '16px',
|
||||
position: 'relative',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Circle size={64} />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '9999px',
|
||||
bottom: 0,
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,59 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -85,7 +33,59 @@ const Details: React.FC<{}> = () => {
|
||||
<a>..</a>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,88 +28,7 @@ const Details: React.FC<{}> = () => {
|
||||
indicate the most popular option.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -151,7 +70,88 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||
|
||||
@@ -25,45 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
height: '16px',
|
||||
width: '50%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
width: `${progress}%`,
|
||||
}}
|
||||
>
|
||||
{progress}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
@@ -92,7 +54,45 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
height: '16px',
|
||||
width: '50%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
width: `${progress}%`,
|
||||
}}
|
||||
>
|
||||
{progress}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -40,38 +40,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Item>
|
||||
<dt style={{ width: '80%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '60%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '30%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '50%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- A property item -->
|
||||
<dl style="
|
||||
/* Content is center horizontally */
|
||||
@@ -97,7 +66,38 @@ const Details: React.FC<{}> = () => {
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Item>
|
||||
<dt style={{ width: '80%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '60%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '30%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
<Item>
|
||||
<dt style={{ width: '50%' }}><Rectangle /></dt>
|
||||
<dd><Circle /></dd>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -60,64 +60,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
margin: '0 auto',
|
||||
paddingBottom: '24px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={15} />
|
||||
</Item>
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Each question and answer item -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -138,7 +81,64 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Answer -->
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
margin: '0 auto',
|
||||
paddingBottom: '24px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={15} />
|
||||
</Item>
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
||||
|
||||
@@ -80,21 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||
<RadialProgress percentages={80} />
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||
<RadialProgress percentages={80} />
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -56,39 +56,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-radio-button-group"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '80px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '120px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-radio-button-group label {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -144,7 +112,39 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
||||
|
||||
@@ -24,81 +24,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
display: 'inline-flex',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="radio-switch-first"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#357EDD' : '',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '#FFF' : '',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-first"
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
htmlFor="radio-switch-second"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '' : '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '' : '#FFF',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-second"
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={!isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Container -->
|
||||
<div style="
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
@@ -126,7 +52,81 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
display: 'inline-flex',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="radio-switch-first"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#357EDD' : '',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '#FFF' : '',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-first"
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
htmlFor="radio-switch-second"
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '' : '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '' : '#FFF',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="radio-switch-second"
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={!isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="p-rating">
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={true} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-rating {
|
||||
/* Center the content */
|
||||
@@ -88,7 +70,25 @@ Note that we use \`flex-direction: row-reverse\` on the container
|
||||
<button class="p-rating-star">★</button>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,125 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
the cursors which indicate the associated side can be resized.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: '50%',
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px dashed rgba(0, 0, 0, 0.3);
|
||||
@@ -305,7 +187,125 @@ const Details: React.FC<{}> = () => {
|
||||
"/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: '50%',
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,76 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -168,7 +99,76 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
||||
|
||||
@@ -21,78 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<div style="display: flex;">
|
||||
<!-- Column -->
|
||||
<div style="
|
||||
@@ -123,7 +52,78 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,65 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
@@ -102,7 +44,65 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,48 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
left: '50%',
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -92,7 +51,48 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
left: '50%',
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,37 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ display: 'flex', height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '16px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
|
||||
<div style={{ width: '80%' }}><Block numberOfBlocks={4} /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="display: flex;">
|
||||
<!-- Sidebar -->
|
||||
<aside style="width: 30%;">
|
||||
@@ -70,7 +40,37 @@ const Details: React.FC<{}> = () => {
|
||||
</main>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,90 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '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={`
|
||||
html={`
|
||||
<!-- Row -->
|
||||
<div style="
|
||||
display: flex;
|
||||
@@ -129,7 +46,90 @@ const Details: React.FC<{}> = () => {
|
||||
</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>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
||||
|
||||
@@ -21,32 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: '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={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -89,7 +64,32 @@ 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',
|
||||
height: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
|
||||
<Circle size={32} />
|
||||
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -26,68 +26,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
@@ -128,7 +67,68 @@ const Details: React.FC<{}> = () => {
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,37 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<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={`
|
||||
html={`
|
||||
<ul style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -75,7 +45,37 @@ const Details: React.FC<{}> = () => {
|
||||
</li>
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -22,38 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ display: 'flex', height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '32px' }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="display: flex;">
|
||||
<!-- Left content -->
|
||||
<div style="flex: 1;">
|
||||
@@ -66,7 +35,38 @@ const Details: React.FC<{}> = () => {
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,52 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '250px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(5).fill(0).map((_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `rotate(${5 * (index + 1)}deg)`,
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the stacked cards */
|
||||
position: relative;
|
||||
@@ -96,7 +51,52 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '250px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(5).fill(0).map((_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `rotate(${5 * (index + 1)}deg)`,
|
||||
width: '100%',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card]} />
|
||||
|
||||
@@ -19,39 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
|
||||
backgroundPosition: '-5px -5px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '10px 10px',
|
||||
height: '200px',
|
||||
padding: '5px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Background */
|
||||
background-color: #ccc;
|
||||
@@ -73,7 +41,39 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
|
||||
backgroundPosition: '-5px -5px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '10px 10px',
|
||||
height: '200px',
|
||||
padding: '5px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ccc',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,34 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||
{random(1000, 9999).toLocaleString()}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||
stars
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -76,7 +49,34 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||
{random(1000, 9999).toLocaleString()}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||
stars
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,41 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#4299e1',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
marginRight: '8px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -86,7 +52,41 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#4299e1',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
marginRight: '8px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -29,78 +29,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
@@ -143,7 +72,78 @@ const Details: React.FC<{}> = () => {
|
||||
">+</button>
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -24,38 +24,7 @@ const Details: React.FC<{}> = () => {
|
||||
The footer always sticks to the bottom if the main content is short.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div style={{ flexGrow: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -72,7 +41,38 @@ const Details: React.FC<{}> = () => {
|
||||
</footer>
|
||||
</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>
|
||||
</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.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
|
||||
<div><Block numberOfBlocks={30} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div>
|
||||
<header style="
|
||||
/* Stick to the top */
|
||||
@@ -59,7 +39,27 @@ const Details: React.FC<{}> = () => {
|
||||
</main>
|
||||
</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>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
overflow: 'scroll',
|
||||
}}
|
||||
>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<section
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
height: '100%',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
@@ -80,7 +44,43 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
|
||||
|
||||
@@ -27,104 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
Try to scroll the main content of table horizontally to see the first column sticks to the left.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={(
|
||||
index === 0
|
||||
? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
}
|
||||
: {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
{
|
||||
index === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td
|
||||
key={col}
|
||||
style={(
|
||||
col === 0 ? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
} : {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
col === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -149,7 +52,104 @@ const Details: React.FC<{}> = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={(
|
||||
index === 0
|
||||
? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
}
|
||||
: {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
{
|
||||
index === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(numberOfColumns).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td
|
||||
key={col}
|
||||
style={(
|
||||
col === 0 ? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
} : {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
col === 0
|
||||
? <Rectangle />
|
||||
: <Block numberOfBlocks={3} />
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
|
||||
|
||||
@@ -25,77 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
Try to scroll the main content of table to see the header sticks to the top.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(3).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#ddd',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(3).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td key={col} style={{ padding: '16px' }}>
|
||||
<Block numberOfBlocks={3} />
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -120,7 +50,77 @@ const Details: React.FC<{}> = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '400px',
|
||||
overflow: 'auto',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<table
|
||||
style={{
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{
|
||||
Array(3).fill(0).map((_, index) => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={{
|
||||
backgroundColor: '#ddd',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
Array(10).fill(0).map((_, row) => {
|
||||
return (
|
||||
<tr key={row} style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
{
|
||||
Array(3).fill(0).map((__, col) => {
|
||||
return (
|
||||
<td key={col} style={{ padding: '16px' }}>
|
||||
<Block numberOfBlocks={3} />
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -27,48 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
the checkbox will be checked even though it's hidden.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="checkbox-switch"
|
||||
style={{
|
||||
backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
|
||||
border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: checked ? 'flex-end' : '',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="checkbox-switch"
|
||||
type="checkbox"
|
||||
style={{ display: 'none' }}
|
||||
checked={checked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<label style="
|
||||
display: flex;
|
||||
|
||||
@@ -107,7 +66,48 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</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>
|
||||
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -46,43 +46,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
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={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -112,7 +76,43 @@ 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',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Tab tabIndex={0}>
|
||||
<div style={{ width: '64px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={1}>
|
||||
<div style={{ width: '32px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={2}>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,36 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '2px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '0 50% 50% 50%',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
transform: 'rotate(45deg)',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ transform: 'rotate(-45deg)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -78,7 +49,36 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '2px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '0 50% 50% 50%',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
justifyContent: 'center',
|
||||
transform: 'rotate(45deg)',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ transform: 'rotate(-45deg)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,77 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '2px solid #aaa',
|
||||
height: '100%',
|
||||
left: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
<ul
|
||||
style={{
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '80%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={15} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the left vertical line */
|
||||
position: relative;
|
||||
@@ -160,7 +90,77 @@ const Details: React.FC<{}> = () => {
|
||||
</ul>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '2px solid #aaa',
|
||||
height: '100%',
|
||||
left: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
<ul
|
||||
style={{
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '80%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={15} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
<li style={{ marginBottom: '8px' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<Circle backgroundColor='#aaa' size={32} />
|
||||
<div style={{ flex: 1, marginLeft: '16px' }}>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginLeft: '48px' }}>
|
||||
<Block numberOfBlocks={10} blockHeight={2} />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,65 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
@@ -103,7 +45,65 @@ const Details: React.FC<{}> = () => {
|
||||
</button>
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -27,39 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouser over the main element to see the tooltip.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip"
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip-content"
|
||||
style={{
|
||||
padding: '8px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="p-tooltip-arrow" />
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-tooltip {
|
||||
/* Used to position the arrow */
|
||||
@@ -126,7 +94,39 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip"
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip-content"
|
||||
style={{
|
||||
padding: '8px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="p-tooltip-arrow" />
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
||||
|
||||
@@ -20,147 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '0px 8px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 0px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 0px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 8px 0px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Up triangle button -->
|
||||
<button style="
|
||||
/* Center the content */
|
||||
@@ -261,7 +121,147 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</button>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent rgba(0, 0, 0, 0.3) transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '0px 8px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Up</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}>Right</div>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent transparent transparent rgba(0, 0, 0, 0.3)',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 0px 8px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
bottom: 0,
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'rgba(0, 0, 0, 0.3) transparent transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 0px 8px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Down</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '8px 8px 8px 0px',
|
||||
height: 0,
|
||||
width: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: '8px' }}>Left</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
||||
|
||||
@@ -23,67 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
You can click the button to choose a file.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '128px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
opacity: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginRight: '8px' }}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '24',
|
||||
stroke: "rgba(0, 0, 0, 0.4)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 1,
|
||||
width: '24',
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
|
||||
c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
|
||||
H18.5z
|
||||
M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the input */
|
||||
position: relative;
|
||||
@@ -118,7 +58,67 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</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>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -19,103 +19,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: "rgba(0, 0, 0, 0.5)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: '#e7040f',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the validation icon */
|
||||
position: relative;
|
||||
@@ -148,7 +52,103 @@ const Details: React.FC<{}> = () => {
|
||||
</i>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: "rgba(0, 0, 0, 0.5)",
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
paddingRight: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<i
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translate(0, -50%)',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
fill: 'none',
|
||||
height: '16px',
|
||||
stroke: '#e7040f',
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
strokeWidth: 2,
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
<path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -24,67 +24,7 @@ const Details: React.FC<{}> = () => {
|
||||
In this pattern, the video is displayed in the background.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
width: '100%',
|
||||
}}
|
||||
autoPlay={true}
|
||||
loop={true}
|
||||
muted={true}
|
||||
playsInline={true}
|
||||
src="/assets/video-background-demo.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the video and content */
|
||||
position: relative;
|
||||
@@ -141,7 +81,67 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
width: '100%',
|
||||
}}
|
||||
autoPlay={true}
|
||||
loop={true}
|
||||
muted={true}
|
||||
playsInline={true}
|
||||
src="/assets/video-background-demo.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '250px' }}>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -20,66 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
color: 'rgba(0, 0, 0, 0.2)',
|
||||
fontSize: '3rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
transform: 'rotate(-45deg)',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
Draft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Used to position the watermark */
|
||||
position: relative;
|
||||
@@ -124,7 +65,66 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
color: 'rgba(0, 0, 0, 0.2)',
|
||||
fontSize: '3rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
transform: 'rotate(-45deg)',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
Draft
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,100 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ 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={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
@@ -180,7 +87,100 @@ 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', width: '80%' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -9,18 +9,21 @@ import SampleCode from '../components/SampleCode';
|
||||
import './browserFrame.css';
|
||||
|
||||
interface BrowserFrameProps {
|
||||
content: React.ReactNode;
|
||||
source?: string;
|
||||
css: string;
|
||||
html: string;
|
||||
}
|
||||
|
||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
|
||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
|
||||
return (
|
||||
<div className="demo">
|
||||
<div className="demo__source">
|
||||
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
|
||||
<div className="demo__html">
|
||||
<SampleCode fullHeight={true} lang="html" code={html} />
|
||||
</div>
|
||||
<div className="demo__css">
|
||||
<SampleCode fullHeight={true} lang="css" code={css} />
|
||||
</div>
|
||||
<div className="demo__live">
|
||||
{content}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,12 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.demo__source,
|
||||
.demo__live {
|
||||
height: 32rem;
|
||||
}
|
||||
.demo__css,
|
||||
.demo__html {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
height: 16rem;
|
||||
overflow: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user