mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-24 19:26:26 +02:00
Add CSS panel
This commit is contained in:
Phuoc Nguyen
@@ -64,7 +64,73 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Container -->
|
||||||
|
<div class="container">
|
||||||
|
<!-- Each accordion item -->
|
||||||
|
<div class="item">
|
||||||
|
<!-- Heading -->
|
||||||
|
<div class="header">
|
||||||
|
<!-- The toggle icon -->
|
||||||
|
<div class="toggle">...</div>
|
||||||
|
|
||||||
|
<!-- The title -->
|
||||||
|
<div class="title">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The content -->
|
||||||
|
<div class="content">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeat other item -->
|
||||||
|
...
|
||||||
|
</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
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -103,59 +169,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Item>
|
</Item>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Container -->
|
|
||||||
<div style="
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
<!-- Each accordion item -->
|
|
||||||
<div style="
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- Heading -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 16px;
|
|
||||||
">
|
|
||||||
<!-- The toggle icon -->
|
|
||||||
<div style="margin-right: 12px;">...</div>
|
|
||||||
|
|
||||||
<!-- The title -->
|
|
||||||
<div style="
|
|
||||||
flex: 1; /* Take remaining width */
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeat other item -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
||||||
|
|||||||
@@ -20,7 +20,126 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Up arrow button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Arrow -->
|
||||||
|
<div style="
|
||||||
|
/* Transparent background */
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
/* Edges */
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateY(25%) rotate(45deg);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Right arrow button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Arrow -->
|
||||||
|
<div style="
|
||||||
|
/* Transparent background */
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
/* Edges */
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateX(-25%) rotate(45deg);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
"></div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Down arrow button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Arrow -->
|
||||||
|
<div style="
|
||||||
|
/* Transparent background */
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
/* Edges */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateY(-25%) rotate(45deg);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Left arrow button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Arrow -->
|
||||||
|
<div style="
|
||||||
|
/* Transparent background */
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
/* Edges */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateX(25%) rotate(45deg);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
`}
|
||||||
|
css={`
|
||||||
|
`}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -163,125 +282,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Up arrow button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Arrow -->
|
|
||||||
<div style="
|
|
||||||
/* Transparent background */
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
/* Edges */
|
|
||||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
transform: translateY(25%) rotate(45deg);
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Right arrow button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Arrow -->
|
|
||||||
<div style="
|
|
||||||
/* Transparent background */
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
/* Edges */
|
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
transform: translateX(-25%) rotate(45deg);
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
"></div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Down arrow button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Arrow -->
|
|
||||||
<div style="
|
|
||||||
/* Transparent background */
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
/* Edges */
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
transform: translateY(-25%) rotate(45deg);
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Left arrow button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Arrow -->
|
|
||||||
<div style="
|
|
||||||
/* Transparent background */
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
/* Edges */
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
transform: translateX(25%) rotate(45deg);
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
||||||
|
|||||||
@@ -40,24 +40,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
|
||||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
|
||||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
|
||||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
|
||||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
">
|
">
|
||||||
@@ -87,7 +70,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||||
|
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||||
|
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||||
|
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||||
|
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -20,7 +20,29 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 64px;
|
||||||
|
width: 64px;
|
||||||
|
">
|
||||||
|
<!-- Avatar image -->
|
||||||
|
<img
|
||||||
|
src="..."
|
||||||
|
style="
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -60,29 +82,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 64px;
|
|
||||||
width: 64px;
|
|
||||||
">
|
|
||||||
<!-- Avatar image -->
|
|
||||||
<img
|
|
||||||
src="..."
|
|
||||||
style="
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
||||||
|
|||||||
@@ -20,7 +20,27 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
color: #FFF;
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -48,27 +68,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
1
|
1
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
color: #FFF;
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
||||||
|
|||||||
@@ -20,7 +20,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Content is centered vertically */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
<!-- Breadcrumb item -->
|
||||||
|
<a>...</a>
|
||||||
|
|
||||||
|
<!-- Separator -->
|
||||||
|
<div style="margin: 0 8px;">/</div>
|
||||||
|
|
||||||
|
<!-- Repeated items and separators -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -41,24 +58,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Content is centered vertically */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
<!-- Breadcrumb item -->
|
|
||||||
<a>...</a>
|
|
||||||
|
|
||||||
<!-- Separator -->
|
|
||||||
<div style="margin: 0 8px;">/</div>
|
|
||||||
|
|
||||||
<!-- Repeated items and separators -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,23 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- Icon -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Label -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -49,23 +65,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- Icon -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Label -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,33 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Put a card in the next row when previous cards take all width */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
margin-left: -8px;
|
||||||
|
margin-right: -8px;
|
||||||
|
">
|
||||||
|
<!-- A card with given width -->
|
||||||
|
<div style="
|
||||||
|
/* There will be 4 cards per row */
|
||||||
|
flex-basis: 25%;
|
||||||
|
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeat other cards -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -51,33 +77,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Put a card in the next row when previous cards take all width */
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
margin-left: -8px;
|
|
||||||
margin-right: -8px;
|
|
||||||
">
|
|
||||||
<!-- A card with given width -->
|
|
||||||
<div style="
|
|
||||||
/* There will be 4 cards per row */
|
|
||||||
flex-basis: 25%;
|
|
||||||
|
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeat other cards -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
||||||
|
|||||||
@@ -22,7 +22,31 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
">
|
||||||
|
<!-- Cover -->
|
||||||
|
<div style="
|
||||||
|
height: 150px;
|
||||||
|
width: 100%;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div style="
|
||||||
|
/* Take available height */
|
||||||
|
flex: 1;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -51,31 +75,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
">
|
|
||||||
<!-- Cover -->
|
|
||||||
<div style="
|
|
||||||
height: 150px;
|
|
||||||
width: 100%;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
<div style="
|
|
||||||
/* Take available height */
|
|
||||||
flex: 1;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
||||||
|
|||||||
@@ -21,7 +21,17 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -37,17 +47,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
|
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
|
||||||
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
|
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,20 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<InputChip>CSS</InputChip>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -64,7 +51,20 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<InputChip>CSS</InputChip>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
||||||
|
|||||||
@@ -56,32 +56,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<div style={{ height: '32px', width: '32px' }}>
|
|
||||||
<Square />
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
Array(numItems).fill(0).map((_, i) => {
|
|
||||||
return (
|
|
||||||
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -133,7 +108,32 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<div style={{ height: '32px', width: '32px' }}>
|
||||||
|
<Square />
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
Array(numItems).fill(0).map((_, i) => {
|
||||||
|
return (
|
||||||
|
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: 'transparent',
|
|
||||||
cursor: 'pointer',
|
|
||||||
height: '32px',
|
|
||||||
position: 'relative',
|
|
||||||
width: '32px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '1px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '100%',
|
|
||||||
left: '50%',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
|
||||||
width: '1px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<button style="
|
<button style="
|
||||||
/* Reset */
|
/* Reset */
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@@ -113,7 +67,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</button>
|
</button>
|
||||||
`}
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
borderColor: 'transparent',
|
||||||
|
cursor: 'pointer',
|
||||||
|
height: '32px',
|
||||||
|
position: 'relative',
|
||||||
|
width: '32px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '1px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '100%',
|
||||||
|
left: '50%',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||||
|
width: '1px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
||||||
|
|||||||
@@ -22,7 +22,33 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Banner is displayed at the bottom */
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- Tells visitors that the website uses cookie -->
|
||||||
|
<div style="
|
||||||
|
/* Take available width */
|
||||||
|
flex: 1;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Close button -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -54,33 +80,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Banner is displayed at the bottom */
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- Tells visitors that the website uses cookie -->
|
|
||||||
<div style="
|
|
||||||
/* Take available width */
|
|
||||||
flex: 1;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Close button -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -22,51 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
height: '256px',
|
|
||||||
position: 'relative',
|
|
||||||
width: '256px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '100px',
|
|
||||||
left: 0,
|
|
||||||
overflow: 'hidden',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
width: '100px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '24px',
|
|
||||||
left: '-64px',
|
|
||||||
position: 'absolute',
|
|
||||||
textAlign: 'center',
|
|
||||||
top: '32px',
|
|
||||||
transform: 'rotate(-45deg)',
|
|
||||||
width: '206px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -109,8 +65,52 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '4px',
|
||||||
|
height: '256px',
|
||||||
|
position: 'relative',
|
||||||
|
width: '256px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '100px',
|
||||||
|
left: 0,
|
||||||
|
overflow: 'hidden',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
width: '100px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '24px',
|
||||||
|
left: '-64px',
|
||||||
|
position: 'absolute',
|
||||||
|
textAlign: 'center',
|
||||||
|
top: '32px',
|
||||||
|
transform: 'rotate(-45deg)',
|
||||||
|
width: '206px',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -20,7 +20,23 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Background color */
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* You can use gradient background color such as
|
||||||
|
background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
|
||||||
|
|
||||||
|
/* Curved corners */
|
||||||
|
border-bottom-left-radius: 50% 40%;
|
||||||
|
border-bottom-right-radius: 50% 40%;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: '100%',
|
height: '100%',
|
||||||
@@ -37,23 +53,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Background color */
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* You can use gradient background color such as
|
|
||||||
background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
|
|
||||||
|
|
||||||
/* Curved corners */
|
|
||||||
border-bottom-left-radius: 50% 40%;
|
|
||||||
border-bottom-right-radius: 50% 40%;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
||||||
|
|||||||
@@ -70,53 +70,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ width: '200px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Checkbox value='1' isChecked={false}>
|
|
||||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Checkbox value='2' isChecked={true}>
|
|
||||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Checkbox value='3' isChecked={false}>
|
|
||||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<label style="
|
<label style="
|
||||||
/* Center the content horizontally */
|
/* Center the content horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -161,7 +115,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: '200px' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
marginBottom: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox value='1' isChecked={false}>
|
||||||
|
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
marginBottom: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox value='2' isChecked={true}>
|
||||||
|
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox value='3' isChecked={false}>
|
||||||
|
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -71,53 +71,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ width: '200px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio value='1'>
|
|
||||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
|
||||||
</Radio>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio value='2'>
|
|
||||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
|
||||||
</Radio>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio value='3'>
|
|
||||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
|
||||||
</Radio>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<label style="
|
<label style="
|
||||||
/* Center the content horizontally */
|
/* Center the content horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -164,7 +118,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: '200px' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
marginBottom: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Radio value='1'>
|
||||||
|
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||||
|
</Radio>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
marginBottom: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Radio value='2'>
|
||||||
|
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||||
|
</Radio>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Radio value='3'>
|
||||||
|
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||||
|
</Radio>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,7 +21,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the diagonal area */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- The diagonal area -->
|
||||||
|
<div style="
|
||||||
|
/* Absolute position */
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Create diagonal sides */
|
||||||
|
transform: skewY(-5deg);
|
||||||
|
|
||||||
|
/* Background color */
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* Displayed under the main content */
|
||||||
|
z-index: -1;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -59,38 +90,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the diagonal area */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- The diagonal area -->
|
|
||||||
<div style="
|
|
||||||
/* Absolute position */
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Create diagonal sides */
|
|
||||||
transform: skewY(-5deg);
|
|
||||||
|
|
||||||
/* Background color */
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Displayed under the main content */
|
|
||||||
z-index: -1;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
||||||
|
|||||||
@@ -22,7 +22,30 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Docked at the top right corner -->
|
||||||
|
<div style="
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -57,30 +80,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Docked at the top right corner -->
|
|
||||||
<div style="
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -23,7 +23,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- Left side -->
|
||||||
|
<div>...</div>
|
||||||
|
|
||||||
|
<!-- Dots -->
|
||||||
|
<div style="
|
||||||
|
/* Bottom border */
|
||||||
|
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* Take remaining width */
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
margin: 0px 4px;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- Right side -->
|
||||||
|
<div>...</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -73,34 +100,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- Left side -->
|
|
||||||
<div>...</div>
|
|
||||||
|
|
||||||
<!-- Dots -->
|
|
||||||
<div style="
|
|
||||||
/* Bottom border */
|
|
||||||
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Take remaining width */
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
margin: 0px 4px;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- Right side -->
|
|
||||||
<div>...</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -44,35 +44,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ul
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
listStyleType: 'none',
|
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Dot index={0} />
|
|
||||||
<Dot index={1} />
|
|
||||||
<Dot index={2} />
|
|
||||||
<Dot index={3} />
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<ul style="
|
<ul style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -102,7 +74,35 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
listStyleType: 'none',
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Dot index={0} />
|
||||||
|
<Dot index={1} />
|
||||||
|
<Dot index={2} />
|
||||||
|
<Dot index={3} />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,40 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
This pattern is also known as off-canvas.
|
This pattern is also known as off-canvas.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '100%',
|
|
||||||
position: 'relative',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '100%',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
height: '100%',
|
|
||||||
left: 0,
|
|
||||||
padding: '16px',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
width: '250px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Block numberOfBlocks={20} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Container takes full size */
|
/* Container takes full size */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -98,7 +65,40 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '100%',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
height: '100%',
|
||||||
|
left: 0,
|
||||||
|
padding: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
width: '250px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Block numberOfBlocks={20} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,7 +20,22 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 4px dashed rgba(0, 0, 0, 0.3),
|
||||||
|
border-radius: 4px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -48,22 +63,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 4px dashed rgba(0, 0, 0, 0.3),
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ width: '256px' }}>
|
|
||||||
<div className="p-drop-cap">
|
|
||||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
|
||||||
describing the presentation of a document written in a markup
|
|
||||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
|
||||||
alongside HTML and JavaScript.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
/* Styles for the first letter */
|
/* Styles for the first letter */
|
||||||
.p-drop-cap:first-letter {
|
.p-drop-cap:first-letter {
|
||||||
@@ -64,7 +43,28 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: '256px' }}>
|
||||||
|
<div className="p-drop-cap">
|
||||||
|
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||||
|
describing the presentation of a document written in a markup
|
||||||
|
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||||
|
alongside HTML and JavaScript.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,7 +28,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
Move the mouse over the button to see the dropdown.
|
Move the mouse over the button to see the dropdown.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<style>
|
||||||
|
/* Hide the dropdown's content by default -->
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the content when hover on the container -->
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="dropdown"
|
||||||
|
style="
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- The trigger element -->
|
||||||
|
<button>...</button>
|
||||||
|
|
||||||
|
<!-- The content -->
|
||||||
|
<div
|
||||||
|
class="dropdown-content"
|
||||||
|
style="
|
||||||
|
/* Position it right below the trigger element */
|
||||||
|
left: 0,
|
||||||
|
paddingTop: '4px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '100%',
|
||||||
|
|
||||||
|
/* It should be on the top of other elements */
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
zIndex: 9999,
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: '200px',
|
||||||
|
width: '200px',
|
||||||
|
"
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -96,53 +142,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<Block numberOfBlocks={20} justify='center' />
|
<Block numberOfBlocks={20} justify='center' />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<style>
|
|
||||||
/* Hide the dropdown's content by default -->
|
|
||||||
.dropdown-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show the content when hover on the container -->
|
|
||||||
.dropdown:hover .dropdown-content {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="dropdown"
|
|
||||||
style="
|
|
||||||
position: relative;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- The trigger element -->
|
|
||||||
<button>...</button>
|
|
||||||
|
|
||||||
<!-- The content -->
|
|
||||||
<div
|
|
||||||
class="dropdown-content"
|
|
||||||
style="
|
|
||||||
/* Position it right below the trigger element */
|
|
||||||
left: 0,
|
|
||||||
paddingTop: '4px',
|
|
||||||
position: 'absolute',
|
|
||||||
top: '100%',
|
|
||||||
|
|
||||||
/* It should be on the top of other elements */
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
zIndex: 9999,
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: '200px',
|
|
||||||
width: '200px',
|
|
||||||
"
|
|
||||||
>
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -23,7 +23,40 @@ const Details: React.FC<{}> = () => {
|
|||||||
Fading a long section to indicate there is more content.
|
Fading a long section to indicate there is more content.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the faded element */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Main content -->
|
||||||
|
<div style="
|
||||||
|
/* Height */
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
/* Scrollable */
|
||||||
|
overflow-y: scroll;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The faded element -->
|
||||||
|
<div style="
|
||||||
|
/* Displayed at the bottom */
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Gradient background */
|
||||||
|
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -56,40 +89,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the faded element */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Main content -->
|
|
||||||
<div style="
|
|
||||||
/* Height */
|
|
||||||
height: 200px;
|
|
||||||
|
|
||||||
/* Scrollable */
|
|
||||||
overflow-y: scroll;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The faded element -->
|
|
||||||
<div style="
|
|
||||||
/* Displayed at the bottom */
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Gradient background */
|
|
||||||
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,7 +23,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Bottom border */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 12px 0px;
|
||||||
|
">
|
||||||
|
<!-- Feature name -->
|
||||||
|
<div style="
|
||||||
|
/* Take available width */
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
margin-right: 16px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The model -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
margin-right: 16px;
|
||||||
|
">
|
||||||
|
<!--
|
||||||
|
For the first row: display the model name (Basic, Pro, etc.)
|
||||||
|
From the second row: display a yes/no icon indicating the feature is available or not
|
||||||
|
-->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeated other models -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeated items -->
|
||||||
|
...
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -128,53 +174,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Bottom border */
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 12px 0px;
|
|
||||||
">
|
|
||||||
<!-- Feature name -->
|
|
||||||
<div style="
|
|
||||||
/* Take available width */
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
margin-right: 16px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The model -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
margin-right: 16px;
|
|
||||||
">
|
|
||||||
<!--
|
|
||||||
For the first row: display the model name (Basic, Pro, etc.)
|
|
||||||
From the second row: display a yes/no icon indicating the feature is available or not
|
|
||||||
-->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeated other models -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeated items -->
|
|
||||||
...
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
||||||
|
|||||||
@@ -23,34 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ width: '60%' }}>
|
|
||||||
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
|
||||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
|
||||||
<Block numberOfBlocks={10} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
|
||||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
|
||||||
<Block numberOfBlocks={15} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<!-- Feature item -->
|
<!-- Feature item -->
|
||||||
<div style="
|
<div style="
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -80,7 +53,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
<!-- Repeated items -->
|
<!-- Repeated items -->
|
||||||
...
|
...
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: '60%' }}>
|
||||||
|
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
||||||
|
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||||
|
<Block numberOfBlocks={10} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||||
|
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||||
|
<Block numberOfBlocks={15} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||||
|
|||||||
@@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div style={{ height: '100%', position: 'relative' }}>
|
|
||||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
|
||||||
<Triangle size={64} corner="tl" />
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
|
||||||
<Triangle size={64} corner="tr" />
|
|
||||||
</div>
|
|
||||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
|
||||||
<Triangle size={64} corner="br" />
|
|
||||||
</div>
|
|
||||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
|
||||||
<Triangle size={64} corner="bl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div style={{ height: '100%', position: 'relative' }}>
|
||||||
|
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||||
|
<Triangle size={64} corner="tl" />
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||||
|
<Triangle size={64} corner="tr" />
|
||||||
|
</div>
|
||||||
|
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||||
|
<Triangle size={64} corner="br" />
|
||||||
|
</div>
|
||||||
|
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||||
|
<Triangle size={64} corner="bl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,7 +21,19 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Fixed at the middle of side -->
|
||||||
|
<div style="
|
||||||
|
right: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0px, -50%);
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: '100%',
|
height: '100%',
|
||||||
@@ -41,19 +53,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Fixed at the middle of side -->
|
|
||||||
<div style="
|
|
||||||
right: 0;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(0px, -50%);
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -24,7 +24,41 @@ const Details: React.FC<{}> = () => {
|
|||||||
Type something in the input to see how the label is shown up.
|
Type something in the input to see how the label is shown up.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<style>
|
||||||
|
.p-floating-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-floating-container label {
|
||||||
|
/* Position the label */
|
||||||
|
left: 8px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
/* Hide it by default */
|
||||||
|
opacity: 0;
|
||||||
|
transition: 'all 200ms',
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the label at desired position when the placeholder of input isn't shown */
|
||||||
|
.p-floating-container input:not(:placeholder-shown) + label {
|
||||||
|
background: #FFF;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="p-floating-container">
|
||||||
|
<!-- The input -->
|
||||||
|
<input placeholder="Placeholder" />
|
||||||
|
|
||||||
|
<!-- The label -->
|
||||||
|
<label>Placeholder</label>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -69,41 +103,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<style>
|
|
||||||
.p-floating-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-floating-container label {
|
|
||||||
/* Position the label */
|
|
||||||
left: 8px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
/* Hide it by default */
|
|
||||||
opacity: 0;
|
|
||||||
transition: 'all 200ms',
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show the label at desired position when the placeholder of input isn't shown */
|
|
||||||
.p-floating-container input:not(:placeholder-shown) + label {
|
|
||||||
background: #FFF;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="p-floating-container">
|
|
||||||
<!-- The input -->
|
|
||||||
<input placeholder="Placeholder" />
|
|
||||||
|
|
||||||
<!-- The label -->
|
|
||||||
<label>Placeholder</label>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,26 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Background */
|
||||||
|
background: url('/assets/full-background.jpeg') center center / cover no-repeat;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -47,26 +66,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Background */
|
|
||||||
background: url('/assets/full-background.jpeg') center center / cover no-repeat;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||||
|
|||||||
@@ -20,7 +20,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Full screen overlay */
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- The close button -->
|
||||||
|
<button style="
|
||||||
|
/* Shown at top right corner */
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 16px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- The navigation menu -->
|
||||||
|
<ul>
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -92,38 +123,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Full screen overlay */
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- The close button -->
|
|
||||||
<button style="
|
|
||||||
/* Shown at top right corner */
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
top: 16px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- The navigation menu -->
|
|
||||||
<ul>
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,47 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
">
|
||||||
|
<header>
|
||||||
|
...
|
||||||
|
</header>
|
||||||
|
<main style="
|
||||||
|
/* Take the remaining height */
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
/* Layout the left sidebar, main content and right sidebar */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
">
|
||||||
|
<!-- Left sidebar -->
|
||||||
|
<aside style="
|
||||||
|
width: 25%;
|
||||||
|
">...</aside>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<article style="
|
||||||
|
/* Take the remaining width */
|
||||||
|
flex-grow: 1;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Right sidebar -->
|
||||||
|
<nav style="
|
||||||
|
width: 20%;
|
||||||
|
">...</nav>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
...
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@@ -71,47 +111,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
">
|
|
||||||
<header>
|
|
||||||
...
|
|
||||||
</header>
|
|
||||||
<main style="
|
|
||||||
/* Take the remaining height */
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
/* Layout the left sidebar, main content and right sidebar */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
">
|
|
||||||
<!-- Left sidebar -->
|
|
||||||
<aside style="
|
|
||||||
width: 25%;
|
|
||||||
">...</aside>
|
|
||||||
|
|
||||||
<!-- Main content -->
|
|
||||||
<article style="
|
|
||||||
/* Take the remaining width */
|
|
||||||
flex-grow: 1;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Right sidebar -->
|
|
||||||
<nav style="
|
|
||||||
width: 20%;
|
|
||||||
">...</nav>
|
|
||||||
</main>
|
|
||||||
<footer>
|
|
||||||
...
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,7 +25,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
/* Used to position the content */
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
color: #FFF;
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
">
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
">
|
||||||
|
<!-- The letters -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -61,38 +92,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
/* Used to position the content */
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
color: #FFF;
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 48px;
|
|
||||||
width: 48px;
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
">
|
|
||||||
<!-- The letters -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -20,7 +20,91 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Add-on prepended -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
width: 100%;
|
||||||
|
">
|
||||||
|
<!-- Add-on -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Input -->
|
||||||
|
<input type="text" style="
|
||||||
|
/* Take the remaining width */
|
||||||
|
flex: 1;
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add-on appended -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
width: 100%;
|
||||||
|
">
|
||||||
|
<!-- Input -->
|
||||||
|
<input type="text" style="
|
||||||
|
/* Take the remaining width */
|
||||||
|
flex: 1;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- Add-on -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Appended and prepended add-ons -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
width: 100%;
|
||||||
|
">
|
||||||
|
<!-- Add-on -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Input -->
|
||||||
|
<input type="text" style="
|
||||||
|
/* Take the remaining width */
|
||||||
|
flex: 1;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- Add-on -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -144,91 +228,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Add-on prepended -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
width: 100%;
|
|
||||||
">
|
|
||||||
<!-- Add-on -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Input -->
|
|
||||||
<input type="text" style="
|
|
||||||
/* Take the remaining width */
|
|
||||||
flex: 1;
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Add-on appended -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
width: 100%;
|
|
||||||
">
|
|
||||||
<!-- Input -->
|
|
||||||
<input type="text" style="
|
|
||||||
/* Take the remaining width */
|
|
||||||
flex: 1;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- Add-on -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Appended and prepended add-ons -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
width: 100%;
|
|
||||||
">
|
|
||||||
<!-- Add-on -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Input -->
|
|
||||||
<input type="text" style="
|
|
||||||
/* Take the remaining width */
|
|
||||||
flex: 1;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- Add-on -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -56,7 +56,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<kbd style="
|
||||||
|
/* Background and color */
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
|
/* Bottom shadow */
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</kbd>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -79,24 +96,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
⌘ + C
|
⌘ + C
|
||||||
</kbd>
|
</kbd>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<kbd style="
|
|
||||||
/* Background and color */
|
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: rgba(0, 0, 0, 0.7);
|
|
||||||
|
|
||||||
/* Bottom shadow */
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</kbd>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -19,7 +19,24 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Lined background */
|
||||||
|
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
||||||
|
background-size: 100% 2em;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Display the content on top of the lines.
|
||||||
|
The line height must be the same as the background size defined above
|
||||||
|
*/
|
||||||
|
background-position-y: 24px;
|
||||||
|
line-height: 2em;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -49,24 +66,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Lined background */
|
|
||||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
|
|
||||||
background-size: 100% 2em;
|
|
||||||
|
|
||||||
/*
|
|
||||||
Display the content on top of the lines.
|
|
||||||
The line height must be the same as the background size defined above
|
|
||||||
*/
|
|
||||||
background-position-y: 24px;
|
|
||||||
line-height: 2em;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
padding: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
|
||||||
<Square />
|
|
||||||
</div>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
|
||||||
<Rectangle />
|
|
||||||
</div>
|
|
||||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
|
||||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Align sub-items to top */
|
/* Align sub-items to top */
|
||||||
align-items: start;
|
align-items: start;
|
||||||
@@ -68,7 +47,28 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
padding: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||||
|
<Square />
|
||||||
|
</div>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||||
|
<Rectangle />
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||||
|
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,7 +28,58 @@ const Details: React.FC<{}> = () => {
|
|||||||
Move the mouse over the second navigation item to see the mega menu.
|
Move the mouse over the second navigation item to see the mega menu.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<style>
|
||||||
|
.p-mega-menu-container {
|
||||||
|
/* Used to position the mega menu */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-mega-menu-content {
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
margin-top: -1px;
|
||||||
|
|
||||||
|
/* Hidden by default */
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
/* Absolute position */
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
|
||||||
|
/* Take full width */
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Displayed on top of other elements */
|
||||||
|
background: #fff;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-mega-menu-trigger:hover .p-mega-menu-content {
|
||||||
|
/* Show the mega menu when hovering the trigger item */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="p-mega-menu-container">
|
||||||
|
<!-- Item -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- An item that triggers displaying the mega menu -->
|
||||||
|
<div class="p-mega-menu-trigger">
|
||||||
|
<!-- The trigger item's content -->
|
||||||
|
<div>...</div>
|
||||||
|
|
||||||
|
<!-- Mega menu -->
|
||||||
|
<div class="p-mega-menu-content">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div style={{ padding: '8px' }}>
|
<div style={{ padding: '8px' }}>
|
||||||
<div className='p-mega-menu-container'>
|
<div className='p-mega-menu-container'>
|
||||||
<div
|
<div
|
||||||
@@ -91,58 +142,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<Block numberOfBlocks={10} />
|
<Block numberOfBlocks={10} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<style>
|
|
||||||
.p-mega-menu-container {
|
|
||||||
/* Used to position the mega menu */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-mega-menu-content {
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
margin-top: -1px;
|
|
||||||
|
|
||||||
/* Hidden by default */
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
/* Absolute position */
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
|
|
||||||
/* Take full width */
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Displayed on top of other elements */
|
|
||||||
background: #fff;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-mega-menu-trigger:hover .p-mega-menu-content {
|
|
||||||
/* Show the mega menu when hovering the trigger item */
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="p-mega-menu-container">
|
|
||||||
<!-- Item -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- An item that triggers displaying the mega menu -->
|
|
||||||
<div class="p-mega-menu-trigger">
|
|
||||||
<!-- The trigger item's content -->
|
|
||||||
<div>...</div>
|
|
||||||
|
|
||||||
<!-- Mega menu -->
|
|
||||||
<div class="p-mega-menu-content">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||||
|
|||||||
@@ -24,7 +24,67 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
">
|
||||||
|
<!-- Normal menu item -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content horizontally */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- With hot key -->
|
||||||
|
<div style="
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
/* Push the hot key to the right */
|
||||||
|
justify-content: space-between;
|
||||||
|
">
|
||||||
|
<!-- Label -->
|
||||||
|
...
|
||||||
|
<!-- Hot key -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- With image and hot key -->
|
||||||
|
<div style="
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
/* Push the hot key to the right */
|
||||||
|
justify-content: space-between;
|
||||||
|
">
|
||||||
|
<div style="
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
<!-- Image -->
|
||||||
|
...
|
||||||
|
<!-- Label -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hot key -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<div style="
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
height: 1px;
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -136,67 +196,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
<!-- Normal menu item -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- With hot key -->
|
|
||||||
<div style="
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
/* Push the hot key to the right */
|
|
||||||
justify-content: space-between;
|
|
||||||
">
|
|
||||||
<!-- Label -->
|
|
||||||
...
|
|
||||||
<!-- Hot key -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- With image and hot key -->
|
|
||||||
<div style="
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
/* Push the hot key to the right */
|
|
||||||
justify-content: space-between;
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
<!-- Image -->
|
|
||||||
...
|
|
||||||
<!-- Label -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Hot key -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Divider -->
|
|
||||||
<div style="
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
height: 1px;
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
patterns={[
|
patterns={[
|
||||||
|
|||||||
@@ -27,7 +27,42 @@ const Details: React.FC<{}> = () => {
|
|||||||
represent the button for closing the modal.
|
represent the button for closing the modal.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
">
|
||||||
|
<!-- Header -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* Border */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0.3);
|
||||||
|
">
|
||||||
|
<!-- Title -->
|
||||||
|
...
|
||||||
|
<!-- Close icon sticks to the right -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
/* Push the buttons to the right */
|
||||||
|
justify-content: flex-end;
|
||||||
|
/* Border */
|
||||||
|
border-top: 1px solid rgba(0, 0, 0.3);
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -76,42 +111,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
<!-- Header -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
/* Border */
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- Title -->
|
|
||||||
...
|
|
||||||
<!-- Close icon sticks to the right -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
/* Push the buttons to the right */
|
|
||||||
justify-content: flex-end;
|
|
||||||
/* Border */
|
|
||||||
border-top: 1px solid rgba(0, 0, 0.3);
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,38 +25,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Hover on the Patterns → Navigation to see the sub dropdowns.
|
Hover on the Patterns → Navigation to see the sub dropdowns.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ul className="p-nested-dropdowns">
|
|
||||||
<li>Home</li>
|
|
||||||
<li>
|
|
||||||
<div>Patterns</div>
|
|
||||||
<ul>
|
|
||||||
<li>Layout</li>
|
|
||||||
<li>Input</li>
|
|
||||||
<li>
|
|
||||||
<div>Navigation</div>
|
|
||||||
<ul>
|
|
||||||
<li>Breadcrumb</li>
|
|
||||||
<li>Dropdown</li>
|
|
||||||
<li>Menu</li>
|
|
||||||
<li>Nested dropdown</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Display</li>
|
|
||||||
<li>Feedback</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Products</li>
|
|
||||||
<li>About</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
/* The root */
|
/* The root */
|
||||||
.p-nested-dropdowns {
|
.p-nested-dropdowns {
|
||||||
@@ -144,7 +113,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
<li>About</li>
|
<li>About</li>
|
||||||
</ul>
|
</ul>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ul className="p-nested-dropdowns">
|
||||||
|
<li>Home</li>
|
||||||
|
<li>
|
||||||
|
<div>Patterns</div>
|
||||||
|
<ul>
|
||||||
|
<li>Layout</li>
|
||||||
|
<li>Input</li>
|
||||||
|
<li>
|
||||||
|
<div>Navigation</div>
|
||||||
|
<ul>
|
||||||
|
<li>Breadcrumb</li>
|
||||||
|
<li>Dropdown</li>
|
||||||
|
<li>Menu</li>
|
||||||
|
<li>Nested dropdown</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Display</li>
|
||||||
|
<li>Feedback</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Products</li>
|
||||||
|
<li>About</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
||||||
|
|||||||
@@ -26,7 +26,20 @@ const Details: React.FC<{}> = () => {
|
|||||||
represent the button for closing the notification.
|
represent the button for closing the notification.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
">
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Close button sticks to the right -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -64,20 +77,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
">
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Close button sticks to the right -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,40 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the overlay */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- The video element -->
|
||||||
|
<video src="..." />
|
||||||
|
|
||||||
|
<!-- The overlay area -->
|
||||||
|
<div style="
|
||||||
|
/* Position */
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Add a dark background */
|
||||||
|
background-color: 'rgba(0, 0, 0, 0.25)',
|
||||||
|
">
|
||||||
|
<!-- The player button -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -68,40 +101,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the overlay */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- The video element -->
|
|
||||||
<video src="..." />
|
|
||||||
|
|
||||||
<!-- The overlay area -->
|
|
||||||
<div style="
|
|
||||||
/* Position */
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Add a dark background */
|
|
||||||
background-color: 'rgba(0, 0, 0, 0.25)',
|
|
||||||
">
|
|
||||||
<!-- The player button -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,7 +21,43 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
">
|
||||||
|
<!-- Pagination item -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Right border */
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Don't set the right border for the last item -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* No right border */
|
||||||
|
border-right: none;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -108,43 +144,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
<!-- Pagination item -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Right border */
|
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Don't set the right border for the last item -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* No right border */
|
|
||||||
border-right: none;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
height: '300px',
|
|
||||||
marginBottom: '16px',
|
|
||||||
position: 'relative',
|
|
||||||
width: '300px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
left: '32px',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
left: '50%',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: '32px',
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
top: '32px',
|
|
||||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: '32px',
|
|
||||||
height: '16px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: '-16px',
|
|
||||||
height: '16px',
|
|
||||||
left: '32px',
|
|
||||||
position: 'absolute',
|
|
||||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: '-16px',
|
|
||||||
height: '16px',
|
|
||||||
left: '50%',
|
|
||||||
position: 'absolute',
|
|
||||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: '-16px',
|
|
||||||
height: '16px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: '32px',
|
|
||||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: '32px',
|
|
||||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '16px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#FFF',
|
|
||||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: '32px',
|
|
||||||
height: '16px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
|
||||||
width: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Border */
|
/* Border */
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
@@ -431,7 +248,190 @@ const Details: React.FC<{}> = () => {
|
|||||||
" />
|
" />
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '4px',
|
||||||
|
height: '300px',
|
||||||
|
marginBottom: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
width: '300px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
left: '32px',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
left: '50%',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: '32px',
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: '32px',
|
||||||
|
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: '32px',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: '-16px',
|
||||||
|
height: '16px',
|
||||||
|
left: '32px',
|
||||||
|
position: 'absolute',
|
||||||
|
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: '-16px',
|
||||||
|
height: '16px',
|
||||||
|
left: '50%',
|
||||||
|
position: 'absolute',
|
||||||
|
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: '-16px',
|
||||||
|
height: '16px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: '32px',
|
||||||
|
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '32px',
|
||||||
|
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '16px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: '32px',
|
||||||
|
height: '16px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||||
|
width: '16px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
||||||
|
|||||||
@@ -21,7 +21,33 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Other element such as avatar -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- The presence indicator -->
|
||||||
|
<div style="
|
||||||
|
/* Shown at the bottom right corner */
|
||||||
|
bottom: 0,
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
transform: translate(50%, 50%);
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
|
||||||
|
/* Background color */
|
||||||
|
background-color: #FF4136;
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -54,33 +80,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Other element such as avatar -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- The presence indicator -->
|
|
||||||
<div style="
|
|
||||||
/* Shown at the bottom right corner */
|
|
||||||
bottom: 0,
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(50%, 50%);
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
|
|
||||||
/* Background color */
|
|
||||||
background-color: #FF4136;
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -20,7 +20,21 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
">
|
||||||
|
<!-- Previous link sticks to the left -->
|
||||||
|
<a>..</a>
|
||||||
|
|
||||||
|
<!-- Next link sticks to the right -->
|
||||||
|
<a>..</a>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -71,21 +85,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
">
|
|
||||||
<!-- Previous link sticks to the left -->
|
|
||||||
<a>..</a>
|
|
||||||
|
|
||||||
<!-- Next link sticks to the right -->
|
|
||||||
<a>..</a>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -28,7 +28,50 @@ const Details: React.FC<{}> = () => {
|
|||||||
indicate the most popular option.
|
indicate the most popular option.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Content is centered horizontally */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- Pricing column -->
|
||||||
|
<div style="
|
||||||
|
/* Content is centered vertically */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Make all columns have the same width */
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
/* OPTIONAL: Space between columns */
|
||||||
|
margin: 0 8px;
|
||||||
|
|
||||||
|
/* OPTIONAL: Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
">
|
||||||
|
<!-- Title -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Price -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Button -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeated pricing columns -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -108,50 +151,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Content is centered horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- Pricing column -->
|
|
||||||
<div style="
|
|
||||||
/* Content is centered vertically */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Make all columns have the same width */
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* OPTIONAL: Space between columns */
|
|
||||||
margin: 0 8px;
|
|
||||||
|
|
||||||
/* OPTIONAL: Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
">
|
|
||||||
<!-- Title -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Price -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Description -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Button -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeated pricing columns -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||||
|
|||||||
@@ -25,7 +25,37 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Colors */
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
">
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
background-color: #357edd;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
|
||||||
|
/* Width based on the number of percentages */
|
||||||
|
width: 40%;
|
||||||
|
">
|
||||||
|
<!-- The number of percentages -->
|
||||||
|
40%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -62,37 +92,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Colors */
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
background-color: #357edd;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
|
|
||||||
/* Width based on the number of percentages */
|
|
||||||
width: 40%;
|
|
||||||
">
|
|
||||||
<!-- The number of percentages -->
|
|
||||||
40%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -40,7 +40,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- A property item -->
|
||||||
|
<dl style="
|
||||||
|
/* Content is center horizontally */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/*
|
||||||
|
The property name will stick to the left, and the value
|
||||||
|
will stick to the right
|
||||||
|
*/
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
margin: 0px;
|
||||||
|
padding: 8px 0px;
|
||||||
|
">
|
||||||
|
<!-- Property name -->
|
||||||
|
<dt>...</dt>
|
||||||
|
|
||||||
|
<!-- Property value -->
|
||||||
|
<dd>...</dd>
|
||||||
|
</dl>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -70,34 +97,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Item>
|
</Item>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- A property item -->
|
|
||||||
<dl style="
|
|
||||||
/* Content is center horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/*
|
|
||||||
The property name will stick to the left, and the value
|
|
||||||
will stick to the right
|
|
||||||
*/
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
margin: 0px;
|
|
||||||
padding: 8px 0px;
|
|
||||||
">
|
|
||||||
<!-- Property name -->
|
|
||||||
<dt>...</dt>
|
|
||||||
|
|
||||||
<!-- Property value -->
|
|
||||||
<dd>...</dd>
|
|
||||||
</dl>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -60,7 +60,29 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Each question and answer item -->
|
||||||
|
<div style="
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
">
|
||||||
|
<!-- Heading -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
">
|
||||||
|
<!-- Question -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- The toggle icon sticks to the right -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Answer -->
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -116,29 +138,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Each question and answer item -->
|
|
||||||
<div style="
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- Heading -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
">
|
|
||||||
<!-- Question -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- The toggle icon sticks to the right -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Answer -->
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
||||||
|
|||||||
@@ -80,21 +80,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
|
||||||
<RadialProgress percentages={80} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
position: relative;
|
position: relative;
|
||||||
">
|
">
|
||||||
@@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||||
|
<RadialProgress percentages={80} />
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -56,39 +56,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="p-radio-button-group"
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
display: 'flex',
|
|
||||||
height: '32px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio value='1'>
|
|
||||||
<div style={{ width: '80px' }}><Rectangle /></div>
|
|
||||||
</Radio>
|
|
||||||
<Radio value='2'>
|
|
||||||
<div style={{ width: '120px' }}><Rectangle /></div>
|
|
||||||
</Radio>
|
|
||||||
<Radio value='3'>
|
|
||||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
|
||||||
</Radio>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
.p-radio-button-group label {
|
.p-radio-button-group label {
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
@@ -144,7 +112,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="p-radio-button-group"
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '4px',
|
||||||
|
display: 'flex',
|
||||||
|
height: '32px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Radio value='1'>
|
||||||
|
<div style={{ width: '80px' }}><Rectangle /></div>
|
||||||
|
</Radio>
|
||||||
|
<Radio value='2'>
|
||||||
|
<div style={{ width: '120px' }}><Rectangle /></div>
|
||||||
|
</Radio>
|
||||||
|
<Radio value='3'>
|
||||||
|
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||||
|
</Radio>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
||||||
|
|||||||
@@ -24,7 +24,36 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Container -->
|
||||||
|
<div style="
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
border-radius: 9999px;
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 4px;
|
||||||
|
">
|
||||||
|
<!-- Radio container -->
|
||||||
|
<label style="
|
||||||
|
border-radius: 9999px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
|
||||||
|
/* For selected radio only */
|
||||||
|
background-color: #357edd;
|
||||||
|
color: #fff;
|
||||||
|
">
|
||||||
|
<input type="radio" style="display: none" />
|
||||||
|
|
||||||
|
<!-- Text -->
|
||||||
|
...
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Other radio item -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -97,36 +126,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Container -->
|
|
||||||
<div style="
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
border-radius: 9999px;
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 4px;
|
|
||||||
">
|
|
||||||
<!-- Radio container -->
|
|
||||||
<label style="
|
|
||||||
border-radius: 9999px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 4px 8px;
|
|
||||||
|
|
||||||
/* For selected radio only */
|
|
||||||
background-color: #357edd;
|
|
||||||
color: #fff;
|
|
||||||
">
|
|
||||||
<input type="radio" style="display: none" />
|
|
||||||
|
|
||||||
<!-- Text -->
|
|
||||||
...
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Other radio item -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<Heading title="Use cases" />
|
<Heading title="Use cases" />
|
||||||
|
|||||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="p-rating">
|
|
||||||
<Star isActive={false} />
|
|
||||||
<Star isActive={false} />
|
|
||||||
<Star isActive={false} />
|
|
||||||
<Star isActive={false} />
|
|
||||||
<Star isActive={true} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
.p-rating {
|
.p-rating {
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
@@ -88,7 +70,25 @@ Note that we use \`flex-direction: row-reverse\` on the container
|
|||||||
<button class="p-rating-star">★</button>
|
<button class="p-rating-star">★</button>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="p-rating">
|
||||||
|
<Star isActive={false} />
|
||||||
|
<Star isActive={false} />
|
||||||
|
<Star isActive={false} />
|
||||||
|
<Star isActive={false} />
|
||||||
|
<Star isActive={true} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,125 +23,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
the cursors which indicate the associated side can be resized.
|
the cursors which indicate the associated side can be resized.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
|
||||||
height: '200px',
|
|
||||||
position: 'relative',
|
|
||||||
width: '200px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
cursor: 'nwse-resize',
|
|
||||||
height: '12px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
cursor: 'ns-resize',
|
|
||||||
height: '12px',
|
|
||||||
left: '50%',
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
cursor: 'nesw-resize',
|
|
||||||
height: '12px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
transform: 'translate(50%, -50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
cursor: 'ew-resize',
|
|
||||||
height: '12px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translate(50%, -50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: 0,
|
|
||||||
cursor: 'nwse-resize',
|
|
||||||
height: '12px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
transform: 'translate(50%, 50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: 0,
|
|
||||||
cursor: 'ns-resize',
|
|
||||||
height: '12px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: '50%',
|
|
||||||
transform: 'translate(50%, 50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
bottom: 0,
|
|
||||||
cursor: 'nesw-resize',
|
|
||||||
height: '12px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
transform: 'translate(-50%, 50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
|
||||||
cursor: 'ew-resize',
|
|
||||||
height: '12px',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
width: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Border */
|
/* Border */
|
||||||
border: 1px dashed rgba(0, 0, 0, 0.3);
|
border: 1px dashed rgba(0, 0, 0, 0.3);
|
||||||
@@ -305,7 +187,125 @@ const Details: React.FC<{}> = () => {
|
|||||||
"/>
|
"/>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||||
|
height: '200px',
|
||||||
|
position: 'relative',
|
||||||
|
width: '200px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
cursor: 'nwse-resize',
|
||||||
|
height: '12px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
cursor: 'ns-resize',
|
||||||
|
height: '12px',
|
||||||
|
left: '50%',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
cursor: 'nesw-resize',
|
||||||
|
height: '12px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
transform: 'translate(50%, -50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
cursor: 'ew-resize',
|
||||||
|
height: '12px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translate(50%, -50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: 0,
|
||||||
|
cursor: 'nwse-resize',
|
||||||
|
height: '12px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
transform: 'translate(50%, 50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: 0,
|
||||||
|
cursor: 'ns-resize',
|
||||||
|
height: '12px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: '50%',
|
||||||
|
transform: 'translate(50%, 50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
bottom: 0,
|
||||||
|
cursor: 'nesw-resize',
|
||||||
|
height: '12px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
transform: 'translate(-50%, 50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||||
|
cursor: 'ew-resize',
|
||||||
|
height: '12px',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: '12px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,76 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: '#BBB',
|
|
||||||
display: 'flex',
|
|
||||||
height: '32px',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '0 16px',
|
|
||||||
position: 'relative',
|
|
||||||
width: '150px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Rectangle />
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '16px solid #CCC',
|
|
||||||
borderLeftColor: 'transparent',
|
|
||||||
bottom: '-8px',
|
|
||||||
left: '-24px',
|
|
||||||
position: 'absolute',
|
|
||||||
zIndex: -1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '8px solid transparent',
|
|
||||||
borderBottomWidth: 0,
|
|
||||||
borderRightWidth: 0,
|
|
||||||
borderTopColor: '#AAA',
|
|
||||||
left: 0,
|
|
||||||
position: 'absolute',
|
|
||||||
top: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '8px solid transparent',
|
|
||||||
borderBottomWidth: 0,
|
|
||||||
borderLeftWidth: 0,
|
|
||||||
borderTopColor: '#AAA',
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
top: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '16px solid #CCC',
|
|
||||||
borderRightColor: 'transparent',
|
|
||||||
bottom: '-8px',
|
|
||||||
position: 'absolute',
|
|
||||||
right: '-24px',
|
|
||||||
zIndex: -1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -168,7 +99,76 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#BBB',
|
||||||
|
display: 'flex',
|
||||||
|
height: '32px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '0 16px',
|
||||||
|
position: 'relative',
|
||||||
|
width: '150px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Rectangle />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '16px solid #CCC',
|
||||||
|
borderLeftColor: 'transparent',
|
||||||
|
bottom: '-8px',
|
||||||
|
left: '-24px',
|
||||||
|
position: 'absolute',
|
||||||
|
zIndex: -1,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '8px solid transparent',
|
||||||
|
borderBottomWidth: 0,
|
||||||
|
borderRightWidth: 0,
|
||||||
|
borderTopColor: '#AAA',
|
||||||
|
left: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
top: '100%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '8px solid transparent',
|
||||||
|
borderBottomWidth: 0,
|
||||||
|
borderLeftWidth: 0,
|
||||||
|
borderTopColor: '#AAA',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: '100%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
border: '16px solid #CCC',
|
||||||
|
borderRightColor: 'transparent',
|
||||||
|
bottom: '-8px',
|
||||||
|
position: 'absolute',
|
||||||
|
right: '-24px',
|
||||||
|
zIndex: -1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
||||||
|
|||||||
@@ -21,7 +21,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="display: flex;">
|
||||||
|
<!-- Column -->
|
||||||
|
<div style="
|
||||||
|
flex: 1;
|
||||||
|
/* Space between columns */
|
||||||
|
margin: 0 8px;
|
||||||
|
|
||||||
|
/* Layout each column */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
">
|
||||||
|
<!-- Cover -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div style="
|
||||||
|
/* Take available height */
|
||||||
|
flex: 1;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button sticks to the bottom -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Repeat with other columns -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -91,39 +123,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="display: flex;">
|
|
||||||
<!-- Column -->
|
|
||||||
<div style="
|
|
||||||
flex: 1;
|
|
||||||
/* Space between columns */
|
|
||||||
margin: 0 8px;
|
|
||||||
|
|
||||||
/* Layout each column */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
">
|
|
||||||
<!-- Cover -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
<div style="
|
|
||||||
/* Take available height */
|
|
||||||
flex: 1;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Button sticks to the bottom -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Repeat with other columns -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,7 +20,32 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* If you want to place the icon before the text input */
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
">
|
||||||
|
<!-- Text input -->
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
style="
|
||||||
|
border-color: transparent;
|
||||||
|
/* Take available width */
|
||||||
|
flex: 1;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Search icon sticks to the left or right -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -77,32 +102,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* If you want to place the icon before the text input */
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- Text input -->
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
style="
|
|
||||||
border-color: transparent;
|
|
||||||
/* Take available width */
|
|
||||||
flex: 1;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Search icon sticks to the left or right -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,7 +20,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Content is centered horizontally */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Used to set the position of text */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Text -->
|
||||||
|
<div style="
|
||||||
|
/* We won't see the separator line */
|
||||||
|
background: #FFF;
|
||||||
|
|
||||||
|
/* Displayed at the center of container */
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Separator line -->
|
||||||
|
<div style="
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -60,39 +92,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Content is centered horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Used to set the position of text */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Text -->
|
|
||||||
<div style="
|
|
||||||
/* We won't see the separator line */
|
|
||||||
background: #FFF;
|
|
||||||
|
|
||||||
/* Displayed at the center of container */
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Separator line -->
|
|
||||||
<div style="
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,27 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="display: flex;">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside style="width: 30%;">
|
||||||
|
...
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main -->
|
||||||
|
<main style="
|
||||||
|
/* Take the remaining width */
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
/* Make it scrollable */
|
||||||
|
overflow: auto;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div style={{ display: 'flex', height: '100%' }}>
|
<div style={{ display: 'flex', height: '100%' }}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -50,27 +70,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
|
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="display: flex;">
|
|
||||||
<!-- Sidebar -->
|
|
||||||
<aside style="width: 30%;">
|
|
||||||
...
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Main -->
|
|
||||||
<main style="
|
|
||||||
/* Take the remaining width */
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* Make it scrollable */
|
|
||||||
overflow: auto;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,33 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Row -->
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin-left: -8px;
|
||||||
|
margin-right: -8px;
|
||||||
|
">
|
||||||
|
<!--Cell with given width. Replace 25% with whatever you want -->
|
||||||
|
<div style="
|
||||||
|
flex: 0 0 25%;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
">25%</div>
|
||||||
|
|
||||||
|
<!-- Cell that takes remaining width -->
|
||||||
|
<div style="
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -103,33 +129,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Row -->
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
margin-left: -8px;
|
|
||||||
margin-right: -8px;
|
|
||||||
">
|
|
||||||
<!--Cell with given width. Replace 25% with whatever you want -->
|
|
||||||
<div style="
|
|
||||||
flex: 0 0 25%;
|
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
|
||||||
">25%</div>
|
|
||||||
|
|
||||||
<!-- Cell that takes remaining width -->
|
|
||||||
<div style="
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
||||||
|
|||||||
@@ -21,32 +21,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: '16px',
|
|
||||||
width: '256px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
|
|
||||||
<Circle size={32} />
|
|
||||||
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Content is centered horizontally */
|
/* Content is centered horizontally */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -89,7 +64,32 @@ const Details: React.FC<{}> = () => {
|
|||||||
"></div>
|
"></div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: '16px',
|
||||||
|
width: '256px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
|
||||||
|
<Circle size={32} />
|
||||||
|
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -26,7 +26,49 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
<!-- Input -->
|
||||||
|
<input type="text" style="
|
||||||
|
border-color: transparent;
|
||||||
|
margin-right: 4px;
|
||||||
|
padding: 4px;
|
||||||
|
width: 100px;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- Buttons container -->
|
||||||
|
<div style="
|
||||||
|
/* Content is centered vertically */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- Up button -->
|
||||||
|
<button style="
|
||||||
|
border-color: transparent;
|
||||||
|
/* Make buttons have the same height */
|
||||||
|
flex: 1,
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Down button -->
|
||||||
|
<button style="
|
||||||
|
border-color: transparent;
|
||||||
|
/* Make buttons have the same height */
|
||||||
|
flex: 1,
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -86,49 +128,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 2px;
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
<!-- Input -->
|
|
||||||
<input type="text" style="
|
|
||||||
border-color: transparent;
|
|
||||||
margin-right: 4px;
|
|
||||||
padding: 4px;
|
|
||||||
width: 100px;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- Buttons container -->
|
|
||||||
<div style="
|
|
||||||
/* Content is centered vertically */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- Up button -->
|
|
||||||
<button style="
|
|
||||||
border-color: transparent;
|
|
||||||
/* Make buttons have the same height */
|
|
||||||
flex: 1,
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Down button -->
|
|
||||||
<button style="
|
|
||||||
border-color: transparent;
|
|
||||||
/* Make buttons have the same height */
|
|
||||||
flex: 1,
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -21,7 +21,32 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<ul style="
|
||||||
|
/* Content is centered horizontally */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Reset styles */
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
">
|
||||||
|
<!-- Navigation item -->
|
||||||
|
<li>
|
||||||
|
<a href="">...</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Navigation item that sticks to the right -->
|
||||||
|
<li style="
|
||||||
|
/* Sticks to the right */
|
||||||
|
margin-left: auto;
|
||||||
|
">
|
||||||
|
<a href="">...</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -50,32 +75,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
|
<li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<ul style="
|
|
||||||
/* Content is centered horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Reset styles */
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
">
|
|
||||||
<!-- Navigation item -->
|
|
||||||
<li>
|
|
||||||
<a href="">...</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- Navigation item that sticks to the right -->
|
|
||||||
<li style="
|
|
||||||
/* Sticks to the right */
|
|
||||||
margin-left: auto;
|
|
||||||
">
|
|
||||||
<a href="">...</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -22,7 +22,21 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="display: flex;">
|
||||||
|
<!-- Left content -->
|
||||||
|
<div style="flex: 1;">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right content -->
|
||||||
|
<div style="flex: 1;">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div style={{ display: 'flex', height: '100%' }}>
|
<div style={{ display: 'flex', height: '100%' }}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -52,21 +66,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="display: flex;">
|
|
||||||
<!-- Left content -->
|
|
||||||
<div style="flex: 1;">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right content -->
|
|
||||||
<div style="flex: 1;">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,7 +20,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the stacked cards */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Repeat if you want to have more cards -->
|
||||||
|
<div style="
|
||||||
|
/* Absolute position */
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Displayed under the container */
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
/* Background and border colors */
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* Rotate it. Change the number of degrees for the following cards */
|
||||||
|
transform: rotate(5deg);
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- Main card's content -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -64,39 +96,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the stacked cards */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Repeat if you want to have more cards -->
|
|
||||||
<div style="
|
|
||||||
/* Absolute position */
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Displayed under the container */
|
|
||||||
z-index: -1;
|
|
||||||
|
|
||||||
/* Background and border colors */
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
/* Rotate it. Change the number of degrees for the following cards */
|
|
||||||
transform: rotate(5deg);
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- Main card's content -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.Card]} />
|
<RelatedPatterns patterns={[Pattern.Card]} />
|
||||||
|
|||||||
@@ -19,7 +19,30 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Background */
|
||||||
|
background-color: #ccc;
|
||||||
|
background-image: radial-gradient(#fff 50%, transparent 50%);
|
||||||
|
background-position: -5px -5px;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 10px 10px;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 5px;
|
||||||
|
">
|
||||||
|
<!-- Inner -->
|
||||||
|
<div style="
|
||||||
|
/* Background */
|
||||||
|
background-color: #ccc;
|
||||||
|
">
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -50,30 +73,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Background */
|
|
||||||
background-color: #ccc;
|
|
||||||
background-image: radial-gradient(#fff 50%, transparent 50%);
|
|
||||||
background-position: -5px -5px;
|
|
||||||
background-repeat: repeat;
|
|
||||||
background-size: 10px 10px;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 5px;
|
|
||||||
">
|
|
||||||
<!-- Inner -->
|
|
||||||
<div style="
|
|
||||||
/* Background */
|
|
||||||
background-color: #ccc;
|
|
||||||
">
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,34 +20,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'inline-flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
|
||||||
{random(1000, 9999).toLocaleString()}
|
|
||||||
</div>
|
|
||||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
|
||||||
stars
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<div style="
|
<div style="
|
||||||
/* Center the content */
|
/* Center the content */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -76,7 +49,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'inline-flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||||
|
{random(1000, 9999).toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||||
|
stars
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -21,7 +21,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
<!-- Status light -->
|
||||||
|
<div style="
|
||||||
|
/* Background color */
|
||||||
|
background-color: rgb(66, 153, 225);
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
margin-right: 8px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div style="
|
||||||
|
/* Take available width */
|
||||||
|
flex: 1;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -54,39 +86,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
<!-- Status light -->
|
|
||||||
<div style="
|
|
||||||
/* Background color */
|
|
||||||
background-color: rgb(66, 153, 225);
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 8px;
|
|
||||||
width: 8px;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
margin-right: 8px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
<div style="
|
|
||||||
/* Take available width */
|
|
||||||
flex: 1;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
@@ -29,7 +29,51 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 32px;
|
||||||
|
width: 128px;
|
||||||
|
">
|
||||||
|
<!-- Minus button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
width: 32px;
|
||||||
|
">-</button>
|
||||||
|
|
||||||
|
<!-- Input container -->
|
||||||
|
<div style="flex: 1">
|
||||||
|
<input type="text" style="
|
||||||
|
/* Take full size of its container */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Plus button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
width: 32px;
|
||||||
|
">+</button>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -99,51 +143,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, .3);
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 32px;
|
|
||||||
width: 128px;
|
|
||||||
">
|
|
||||||
<!-- Minus button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
width: 32px;
|
|
||||||
">-</button>
|
|
||||||
|
|
||||||
<!-- Input container -->
|
|
||||||
<div style="flex: 1">
|
|
||||||
<input type="text" style="
|
|
||||||
/* Take full size of its container */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Plus button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
width: 32px;
|
|
||||||
">+</button>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -24,7 +24,25 @@ const Details: React.FC<{}> = () => {
|
|||||||
The footer always sticks to the bottom if the main content is short.
|
The footer always sticks to the bottom if the main content is short.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
">
|
||||||
|
<header style="flex-shrink: 0;">
|
||||||
|
...
|
||||||
|
</header>
|
||||||
|
<main style="flex-grow: 1;">
|
||||||
|
...
|
||||||
|
</main>
|
||||||
|
<footer style="flex-shrink: 0;">
|
||||||
|
...
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@@ -54,25 +72,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
">
|
|
||||||
<header style="flex-shrink: 0;">
|
|
||||||
...
|
|
||||||
</header>
|
|
||||||
<main style="flex-grow: 1;">
|
|
||||||
...
|
|
||||||
</main>
|
|
||||||
<footer style="flex-shrink: 0;">
|
|
||||||
...
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -25,7 +25,22 @@ const Details: React.FC<{}> = () => {
|
|||||||
Try to scroll the main content to see the header sticks to the top of page.
|
Try to scroll the main content to see the header sticks to the top of page.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div>
|
||||||
|
<header style="
|
||||||
|
/* Stick to the top */
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
...
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -44,22 +59,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
<div><Block numberOfBlocks={30} /></div>
|
<div><Block numberOfBlocks={30} /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div>
|
|
||||||
<header style="
|
|
||||||
/* Stick to the top */
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
...
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -23,7 +23,29 @@ const Details: React.FC<{}> = () => {
|
|||||||
Try to scroll the main content to see each section sticks to the top of page.
|
Try to scroll the main content to see each section sticks to the top of page.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
">
|
||||||
|
<section style="
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Stick to the top */
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Repeat other sections -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: '100%',
|
height: '100%',
|
||||||
@@ -58,29 +80,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
height: 100%;
|
|
||||||
overflow: scroll;
|
|
||||||
">
|
|
||||||
<section style="
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Stick to the top */
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Repeat other sections -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
|
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickyTableColumn, Pattern.StickyTableHeaders]} />
|
||||||
|
|||||||
@@ -27,7 +27,33 @@ const Details: React.FC<{}> = () => {
|
|||||||
Try to scroll the main content of table horizontally to see the first column sticks to the left.
|
Try to scroll the main content of table horizontally to see the first column sticks to the left.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="
|
||||||
|
/* Background color */
|
||||||
|
background-color: #ddd;
|
||||||
|
|
||||||
|
/* Stick to the left */
|
||||||
|
left: 0;
|
||||||
|
position: sticky;
|
||||||
|
|
||||||
|
/* Displayed on top of other rows when scrolling */
|
||||||
|
z-index: 9999;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<!-- Repeat other header column ... -->
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -123,33 +149,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="
|
|
||||||
/* Background color */
|
|
||||||
background-color: #ddd;
|
|
||||||
|
|
||||||
/* Stick to the left */
|
|
||||||
left: 0;
|
|
||||||
position: sticky;
|
|
||||||
|
|
||||||
/* Displayed on top of other rows when scrolling */
|
|
||||||
z-index: 9999;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</th>
|
|
||||||
|
|
||||||
<!-- Repeat other header column ... -->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
|
<RelatedPatterns patterns={[Pattern.StickyHeader, Pattern.StickySections, Pattern.StickyTableHeaders]} />
|
||||||
|
|||||||
@@ -25,7 +25,33 @@ const Details: React.FC<{}> = () => {
|
|||||||
Try to scroll the main content of table to see the header sticks to the top.
|
Try to scroll the main content of table to see the header sticks to the top.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="
|
||||||
|
/* Background color */
|
||||||
|
background-color: #ddd;
|
||||||
|
|
||||||
|
/* Stick to the top */
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
/* Displayed on top of other rows when scrolling */
|
||||||
|
z-index: 9999;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<!-- Repeat other header column ... -->
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -94,33 +120,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="
|
|
||||||
/* Background color */
|
|
||||||
background-color: #ddd;
|
|
||||||
|
|
||||||
/* Stick to the top */
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
/* Displayed on top of other rows when scrolling */
|
|
||||||
z-index: 9999;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</th>
|
|
||||||
|
|
||||||
<!-- Repeat other header column ... -->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns
|
<RelatedPatterns
|
||||||
|
|||||||
@@ -27,7 +27,47 @@ const Details: React.FC<{}> = () => {
|
|||||||
the checkbox will be checked even though it's hidden.
|
the checkbox will be checked even though it's hidden.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<label style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 32px;
|
||||||
|
width: 64px;
|
||||||
|
|
||||||
|
/* OFF status */
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
border: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
|
||||||
|
/* ON status */
|
||||||
|
background-color: #357edd;
|
||||||
|
border: 1px solid #357edd;
|
||||||
|
/* Push the circle to the right */
|
||||||
|
justify-content: flex-end;
|
||||||
|
">
|
||||||
|
<!-- Hide the input -->
|
||||||
|
<input type="checkbox" style="display: none" />
|
||||||
|
|
||||||
|
<!-- Circle -->
|
||||||
|
<div style="
|
||||||
|
/* Rounded border */
|
||||||
|
border-radius: 9999px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
width: 32px;
|
||||||
|
|
||||||
|
background-color: #FFF;
|
||||||
|
|
||||||
|
/* OFF status */
|
||||||
|
border: 1px solid rgba(0, 0, 0, .3);
|
||||||
|
" />
|
||||||
|
</label>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -67,47 +107,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<label style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 32px;
|
|
||||||
width: 64px;
|
|
||||||
|
|
||||||
/* OFF status */
|
|
||||||
background-color: rgba(0, 0, 0, .1);
|
|
||||||
border: 1px solid rgba(0, 0, 0, .3);
|
|
||||||
|
|
||||||
/* ON status */
|
|
||||||
background-color: #357edd;
|
|
||||||
border: 1px solid #357edd;
|
|
||||||
/* Push the circle to the right */
|
|
||||||
justify-content: flex-end;
|
|
||||||
">
|
|
||||||
<!-- Hide the input -->
|
|
||||||
<input type="checkbox" style="display: none" />
|
|
||||||
|
|
||||||
<!-- Circle -->
|
|
||||||
<div style="
|
|
||||||
/* Rounded border */
|
|
||||||
border-radius: 9999px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
width: 32px;
|
|
||||||
|
|
||||||
background-color: #FFF;
|
|
||||||
|
|
||||||
/* OFF status */
|
|
||||||
border: 1px solid rgba(0, 0, 0, .3);
|
|
||||||
" />
|
|
||||||
</label>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -46,7 +46,38 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- Active tab -->
|
||||||
|
<div style="
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
/* Hide the bottom border */
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
|
||||||
|
/* Border radius */
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inactive tab -->
|
||||||
|
<div style="
|
||||||
|
/* Has only the bottom border */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -81,38 +112,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Tab>
|
</Tab>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- Active tab -->
|
|
||||||
<div style="
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
/* Hide the bottom border */
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
|
|
||||||
/* Border radius */
|
|
||||||
border-top-left-radius: 2px;
|
|
||||||
border-top-right-radius: 2px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Inactive tab -->
|
|
||||||
<div style="
|
|
||||||
/* Has only the bottom border */
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -23,7 +23,34 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 0px 50% 50% 50%;
|
||||||
|
|
||||||
|
/* Angle at the top */
|
||||||
|
transform: rotate(45deg);
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 64px;
|
||||||
|
width: 64px;
|
||||||
|
">
|
||||||
|
<!-- Display the content vertically -->
|
||||||
|
<div style="
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -51,34 +78,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 0px 50% 50% 50%;
|
|
||||||
|
|
||||||
/* Angle at the top */
|
|
||||||
transform: rotate(45deg);
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 64px;
|
|
||||||
width: 64px;
|
|
||||||
">
|
|
||||||
<!-- Display the content vertically -->
|
|
||||||
<div style="
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,7 +22,76 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the left vertical line */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Left vertical line -->
|
||||||
|
<div style="
|
||||||
|
/* Border */
|
||||||
|
border-right: 2px solid #aaa;
|
||||||
|
|
||||||
|
/* Positioned at the left */
|
||||||
|
left: 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
/* Take full height */
|
||||||
|
height: 100%;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- The timeline items container -->
|
||||||
|
<ul style="
|
||||||
|
/* Reset styles */
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
">
|
||||||
|
<!-- Each timeline item -->
|
||||||
|
<li style="margin-bottom: 8px;">
|
||||||
|
<!-- The circle and title -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content horizontally */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
<!-- The circle -->
|
||||||
|
<div style="
|
||||||
|
/* Rounded border */
|
||||||
|
background-color: rgb(170, 170, 170);
|
||||||
|
border-radius: 9999px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- The title -->
|
||||||
|
<div style="
|
||||||
|
/* Take available width */
|
||||||
|
flex: 1;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The description -->
|
||||||
|
<div style="
|
||||||
|
/* Make it align with the title */
|
||||||
|
margin-left: 48px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Repeat other items -->
|
||||||
|
...
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -91,76 +160,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the left vertical line */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Left vertical line -->
|
|
||||||
<div style="
|
|
||||||
/* Border */
|
|
||||||
border-right: 2px solid #aaa;
|
|
||||||
|
|
||||||
/* Positioned at the left */
|
|
||||||
left: 16px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
/* Take full height */
|
|
||||||
height: 100%;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- The timeline items container -->
|
|
||||||
<ul style="
|
|
||||||
/* Reset styles */
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
">
|
|
||||||
<!-- Each timeline item -->
|
|
||||||
<li style="margin-bottom: 8px;">
|
|
||||||
<!-- The circle and title -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content horizontally */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
<!-- The circle -->
|
|
||||||
<div style="
|
|
||||||
/* Rounded border */
|
|
||||||
background-color: rgb(170, 170, 170);
|
|
||||||
border-radius: 9999px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- The title -->
|
|
||||||
<div style="
|
|
||||||
/* Take available width */
|
|
||||||
flex: 1;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The description -->
|
|
||||||
<div style="
|
|
||||||
/* Make it align with the title */
|
|
||||||
margin-left: 48px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- Repeat other items -->
|
|
||||||
...
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,7 +22,31 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
">
|
||||||
|
<!-- Text input -->
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
style="
|
||||||
|
border-color: transparent;
|
||||||
|
/* Take available width */
|
||||||
|
flex: 1;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Toggle button sticks to the right -->
|
||||||
|
<button>
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -79,31 +103,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- Text input -->
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
style="
|
|
||||||
border-color: transparent;
|
|
||||||
/* Take available width */
|
|
||||||
flex: 1;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Toggle button sticks to the right -->
|
|
||||||
<button>
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -27,39 +27,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
Move the mouser over the main element to see the tooltip.
|
Move the mouser over the main element to see the tooltip.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
height: '100%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="p-tooltip"
|
|
||||||
style={{
|
|
||||||
marginBottom: '16px',
|
|
||||||
width: '150px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="p-tooltip-content"
|
|
||||||
style={{
|
|
||||||
padding: '8px',
|
|
||||||
width: '200px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
|
||||||
</div>
|
|
||||||
<div className="p-tooltip-arrow" />
|
|
||||||
<Rectangle height={32} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
source={`
|
|
||||||
<style>
|
<style>
|
||||||
.p-tooltip {
|
.p-tooltip {
|
||||||
/* Used to position the arrow */
|
/* Used to position the arrow */
|
||||||
@@ -126,7 +94,39 @@ const Details: React.FC<{}> = () => {
|
|||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
/>
|
css={``}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="p-tooltip"
|
||||||
|
style={{
|
||||||
|
marginBottom: '16px',
|
||||||
|
width: '150px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="p-tooltip-content"
|
||||||
|
style={{
|
||||||
|
padding: '8px',
|
||||||
|
width: '200px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||||
|
</div>
|
||||||
|
<div className="p-tooltip-arrow" />
|
||||||
|
<Rectangle height={32} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BrowserFrame>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
||||||
|
|||||||
@@ -20,7 +20,109 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<!-- Up triangle button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Triangle -->
|
||||||
|
<div style="
|
||||||
|
border-color: transparent transparent rgba(0, 0, 0, 0.3);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0px 8px 8px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Right triangle button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
|
||||||
|
<!-- Triangle -->
|
||||||
|
<div style="
|
||||||
|
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 8px 0px 8px 8px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
"></div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Down triangle button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Triangle -->
|
||||||
|
<div style="
|
||||||
|
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 8px 8px 0px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Left triangle button -->
|
||||||
|
<button style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
padding: 8px;
|
||||||
|
">
|
||||||
|
<!-- Triangle -->
|
||||||
|
<div style="
|
||||||
|
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 8px 8px 8px 0px;
|
||||||
|
|
||||||
|
/* Size */
|
||||||
|
height: 0px;
|
||||||
|
width: 0px;
|
||||||
|
"></div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
...
|
||||||
|
</button>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -159,109 +261,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<!-- Up triangle button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Triangle -->
|
|
||||||
<div style="
|
|
||||||
border-color: transparent transparent rgba(0, 0, 0, 0.3);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0px 8px 8px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 0px;
|
|
||||||
width: 0px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Right triangle button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
|
|
||||||
<!-- Triangle -->
|
|
||||||
<div style="
|
|
||||||
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 8px 0px 8px 8px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 0px;
|
|
||||||
width: 0px;
|
|
||||||
"></div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Down triangle button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Triangle -->
|
|
||||||
<div style="
|
|
||||||
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 8px 8px 0px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 0px;
|
|
||||||
width: 0px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Left triangle button -->
|
|
||||||
<button style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Spacing */
|
|
||||||
padding: 8px;
|
|
||||||
">
|
|
||||||
<!-- Triangle -->
|
|
||||||
<div style="
|
|
||||||
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 8px 8px 8px 0px;
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
height: 0px;
|
|
||||||
width: 0px;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
...
|
|
||||||
</button>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
||||||
|
|||||||
@@ -23,7 +23,43 @@ const Details: React.FC<{}> = () => {
|
|||||||
You can click the button to choose a file.
|
You can click the button to choose a file.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the input */
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
">
|
||||||
|
<!-- The real file input -->
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
style="
|
||||||
|
/* Take the full size */
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Make it transparent */
|
||||||
|
opacity: 0;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- The upload icon -->
|
||||||
|
<div style="margin-right: 8px">...</div>
|
||||||
|
|
||||||
|
<!-- The label -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -82,43 +118,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the input */
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
">
|
|
||||||
<!-- The real file input -->
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
style="
|
|
||||||
/* Take the full size */
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Make it transparent */
|
|
||||||
opacity: 0;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- The upload icon -->
|
|
||||||
<div style="margin-right: 8px">...</div>
|
|
||||||
|
|
||||||
<!-- The label -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -19,7 +19,41 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the validation icon */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- The input -->
|
||||||
|
<input style="
|
||||||
|
/* Border */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
/* Take the full width */
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Don't overlap the icon */
|
||||||
|
padding-right: 24px;
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- The icon container -->
|
||||||
|
<i style="
|
||||||
|
/* Positioned at the right side */
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
|
">
|
||||||
|
<!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
|
||||||
|
...
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -114,41 +148,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the validation icon */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- The input -->
|
|
||||||
<input style="
|
|
||||||
/* Border */
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
/* Take the full width */
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Don't overlap the icon */
|
|
||||||
padding-right: 24px;
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- The icon container -->
|
|
||||||
<i style="
|
|
||||||
/* Positioned at the right side */
|
|
||||||
position: absolute;
|
|
||||||
right: 8px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
|
|
||||||
z-index: 10;
|
|
||||||
">
|
|
||||||
<!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
|
|
||||||
...
|
|
||||||
</i>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -24,7 +24,65 @@ const Details: React.FC<{}> = () => {
|
|||||||
In this pattern, the video is displayed in the background.
|
In this pattern, the video is displayed in the background.
|
||||||
</div>
|
</div>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the video and content */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- The video container -->
|
||||||
|
<div style="
|
||||||
|
/* Positioned at the top left corner */
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Hide the scrollbar */
|
||||||
|
overflow: hidden;
|
||||||
|
">
|
||||||
|
<video
|
||||||
|
style="
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
/* Center the video */
|
||||||
|
left: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
/* Take full width */
|
||||||
|
width: 100%;
|
||||||
|
"
|
||||||
|
src="..."
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The content -->
|
||||||
|
<div style="
|
||||||
|
/* Positioned at the top left corner */
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -83,65 +141,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the video and content */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- The video container -->
|
|
||||||
<div style="
|
|
||||||
/* Positioned at the top left corner */
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Hide the scrollbar */
|
|
||||||
overflow: hidden;
|
|
||||||
">
|
|
||||||
<video
|
|
||||||
style="
|
|
||||||
object-fit: cover;
|
|
||||||
|
|
||||||
/* Center the video */
|
|
||||||
left: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
/* Take full width */
|
|
||||||
width: 100%;
|
|
||||||
"
|
|
||||||
src="..."
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The content -->
|
|
||||||
<div style="
|
|
||||||
/* Positioned at the top left corner */
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
|
|||||||
@@ -20,7 +20,53 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
/* Used to position the watermark */
|
||||||
|
position: relative;
|
||||||
|
">
|
||||||
|
<!-- Watermark container -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Absolute position */
|
||||||
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
/* Take full size */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
">
|
||||||
|
<!-- The watermark -->
|
||||||
|
<div style="
|
||||||
|
/* Text color */
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
/* Text styles */
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
/* Rotate the text */
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
|
||||||
|
/* Disable the selection */
|
||||||
|
user-select: none;
|
||||||
|
">
|
||||||
|
Draft
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Other content -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -78,53 +124,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
/* Used to position the watermark */
|
|
||||||
position: relative;
|
|
||||||
">
|
|
||||||
<!-- Watermark container -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Absolute position */
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
/* Take full size */
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
">
|
|
||||||
<!-- The watermark -->
|
|
||||||
<div style="
|
|
||||||
/* Text color */
|
|
||||||
color: rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
/* Text styles */
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
/* Rotate the text */
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
|
|
||||||
/* Disable the selection */
|
|
||||||
user-select: none;
|
|
||||||
">
|
|
||||||
Draft
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Other content -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,7 +22,73 @@ const Details: React.FC<{}> = () => {
|
|||||||
</Helmet>
|
</Helmet>
|
||||||
<div className='p-8 pb-20'>
|
<div className='p-8 pb-20'>
|
||||||
<BrowserFrame
|
<BrowserFrame
|
||||||
content={(
|
html={`
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
">
|
||||||
|
<!-- Step -->
|
||||||
|
<div style="
|
||||||
|
/* Make all steps have the same width */
|
||||||
|
flex: 1;
|
||||||
|
">
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
">
|
||||||
|
<!-- The left connector -->
|
||||||
|
<div style="
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
/*
|
||||||
|
For the first step, you might need to set it to transparent background:
|
||||||
|
background-color: transparent;
|
||||||
|
*/
|
||||||
|
" />
|
||||||
|
|
||||||
|
<!-- The step number -->
|
||||||
|
<div style="
|
||||||
|
/* Center the content */
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* Rounded border */
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
border-radius: 9999px;
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
|
||||||
|
/* OPTIONAL: Spacing between it and connectors */
|
||||||
|
margin-left: 4px;
|
||||||
|
margin-right: 4px;
|
||||||
|
">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The right connector -->
|
||||||
|
<div style="
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
/*
|
||||||
|
For the last step, you might need to set it to transparent background:
|
||||||
|
background-color: transparent;
|
||||||
|
*/
|
||||||
|
" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Title of step -->
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
css={``}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@@ -114,73 +180,7 @@ const Details: React.FC<{}> = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</BrowserFrame>
|
||||||
source={`
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
">
|
|
||||||
<!-- Step -->
|
|
||||||
<div style="
|
|
||||||
/* Make all steps have the same width */
|
|
||||||
flex: 1;
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<!-- The left connector -->
|
|
||||||
<div style="
|
|
||||||
flex: 1;
|
|
||||||
height: 1px;
|
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
/*
|
|
||||||
For the first step, you might need to set it to transparent background:
|
|
||||||
background-color: transparent;
|
|
||||||
*/
|
|
||||||
" />
|
|
||||||
|
|
||||||
<!-- The step number -->
|
|
||||||
<div style="
|
|
||||||
/* Center the content */
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
/* Rounded border */
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
border-radius: 9999px;
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
|
|
||||||
/* OPTIONAL: Spacing between it and connectors */
|
|
||||||
margin-left: 4px;
|
|
||||||
margin-right: 4px;
|
|
||||||
">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- The right connector -->
|
|
||||||
<div style="
|
|
||||||
flex: 1;
|
|
||||||
height: 1px;
|
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
/*
|
|
||||||
For the last step, you might need to set it to transparent background:
|
|
||||||
background-color: transparent;
|
|
||||||
*/
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Title of step -->
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</DetailsLayout>
|
</DetailsLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -9,18 +9,21 @@ import SampleCode from '../components/SampleCode';
|
|||||||
import './browserFrame.css';
|
import './browserFrame.css';
|
||||||
|
|
||||||
interface BrowserFrameProps {
|
interface BrowserFrameProps {
|
||||||
content: React.ReactNode;
|
css: string;
|
||||||
source?: string;
|
html: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
|
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
|
||||||
return (
|
return (
|
||||||
<div className="demo">
|
<div className="demo">
|
||||||
<div className="demo__source">
|
<div className="demo__html">
|
||||||
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
|
<SampleCode fullHeight={true} lang="html" code={html} />
|
||||||
|
</div>
|
||||||
|
<div className="demo__css">
|
||||||
|
<SampleCode fullHeight={true} lang="css" code={css} />
|
||||||
</div>
|
</div>
|
||||||
<div className="demo__live">
|
<div className="demo__live">
|
||||||
{content}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -7,7 +7,12 @@
|
|||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
.demo__source,
|
|
||||||
.demo__live {
|
.demo__live {
|
||||||
height: 32rem;
|
height: 32rem;
|
||||||
}
|
}
|
||||||
|
.demo__css,
|
||||||
|
.demo__html {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
height: 16rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user