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>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -103,59 +169,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
|
||||
|
||||
@@ -20,7 +20,126 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -163,125 +282,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
|
||||
|
||||
@@ -40,24 +40,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
@@ -87,7 +70,24 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar /></div>
|
||||
<div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,7 +20,29 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -60,29 +82,7 @@ const Details: React.FC<{}> = () => {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
|
||||
|
||||
@@ -20,7 +20,27 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -48,27 +68,7 @@ const Details: React.FC<{}> = () => {
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
|
||||
|
||||
@@ -20,7 +20,24 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -41,24 +58,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,23 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
html={`
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Icon -->
|
||||
...
|
||||
|
||||
<!-- Label -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -49,23 +65,7 @@ const Details: React.FC<{}> = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<button style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Icon -->
|
||||
...
|
||||
|
||||
<!-- Label -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,33 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -51,33 +77,7 @@ const Details: React.FC<{}> = () => {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Put a card in the next row when previous cards take all width */
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
">
|
||||
<!-- 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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
|
||||
|
||||
@@ -22,7 +22,31 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -51,31 +75,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
|
||||
|
||||
@@ -21,7 +21,17 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
html={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -37,17 +47,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,20 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<InputChip>CSS</InputChip>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -64,7 +51,20 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<InputChip>CSS</InputChip>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CloseButton]} />
|
||||
|
||||
@@ -56,32 +56,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ height: '32px', width: '32px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
{
|
||||
Array(numItems).fill(0).map((_, i) => {
|
||||
return (
|
||||
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -133,7 +108,32 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ height: '32px', width: '32px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
{
|
||||
Array(numItems).fill(0).map((_, i) => {
|
||||
return (
|
||||
<CircularItem key={i} degree={360 / numItems * i}>{i + 1}</CircularItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,53 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<button style="
|
||||
/* Reset */
|
||||
background-color: transparent;
|
||||
@@ -113,7 +67,53 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</button>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(0%, -50%) rotate(45deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, 0%) rotate(45deg)',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
|
||||
|
||||
@@ -22,7 +22,33 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -54,33 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -22,51 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -109,8 +65,52 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '256px',
|
||||
position: 'relative',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100px',
|
||||
left: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '24px',
|
||||
left: '-64px',
|
||||
position: 'absolute',
|
||||
textAlign: 'center',
|
||||
top: '32px',
|
||||
transform: 'rotate(-45deg)',
|
||||
width: '206px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -20,7 +20,23 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
height: '100%',
|
||||
@@ -37,23 +53,7 @@ const Details: React.FC<{}> = () => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.DiagonalSection]} />
|
||||
|
||||
@@ -70,53 +70,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='1' isChecked={false}>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='2' isChecked={true}>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='3' isChecked={false}>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
@@ -161,7 +115,53 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='1' isChecked={false}>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='2' isChecked={true}>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Checkbox value='3' isChecked={false}>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -71,53 +71,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<label style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
@@ -164,7 +118,53 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '200px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
}}
|
||||
>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '150px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,7 +21,38 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -59,38 +90,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CurvedBackground]} />
|
||||
|
||||
@@ -22,7 +22,30 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -57,30 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -23,7 +23,34 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -73,34 +100,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -44,35 +44,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<Dot index={0} />
|
||||
<Dot index={1} />
|
||||
<Dot index={2} />
|
||||
<Dot index={3} />
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<ul style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -102,7 +74,35 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<Dot index={0} />
|
||||
<Dot index={1} />
|
||||
<Dot index={2} />
|
||||
<Dot index={3} />
|
||||
</ul>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,40 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
This pattern is also known as off-canvas.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Container takes full size */
|
||||
height: 100%;
|
||||
@@ -98,7 +65,40 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,7 +20,22 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -48,22 +63,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,28 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div className="p-drop-cap">
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
/* Styles for the first letter */
|
||||
.p-drop-cap:first-letter {
|
||||
@@ -64,7 +43,28 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div className="p-drop-cap">
|
||||
Cascading Style Sheets (CSS) is a style sheet language used for
|
||||
describing the presentation of a document written in a markup
|
||||
language like HTML. CSS is a cornerstone technology of the World Wide Web,
|
||||
alongside HTML and JavaScript.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,7 +28,53 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouse over the button to see the dropdown.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -96,53 +142,7 @@ const Details: React.FC<{}> = () => {
|
||||
<Block numberOfBlocks={20} justify='center' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -23,7 +23,40 @@ const Details: React.FC<{}> = () => {
|
||||
Fading a long section to indicate there is more content.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -56,40 +89,7 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,7 +23,53 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -128,53 +174,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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 -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
|
||||
|
||||
@@ -23,34 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<!-- Feature item -->
|
||||
<div style="
|
||||
display: flex;
|
||||
@@ -80,7 +53,34 @@ const Details: React.FC<{}> = () => {
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||
|
||||
@@ -21,23 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -78,7 +62,23 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,7 +21,19 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
html={`
|
||||
<!-- Fixed at the middle of side -->
|
||||
<div style="
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '100%',
|
||||
@@ -41,19 +53,7 @@ const Details: React.FC<{}> = () => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<!-- Fixed at the middle of side -->
|
||||
<div style="
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -24,7 +24,41 @@ const Details: React.FC<{}> = () => {
|
||||
Type something in the input to see how the label is shown up.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -69,41 +103,7 @@ const Details: React.FC<{}> = () => {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,26 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -47,26 +66,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||
|
||||
@@ -20,7 +20,38 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -92,38 +123,7 @@ const Details: React.FC<{}> = () => {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,47 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -71,47 +111,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,7 +25,38 @@ const Details: React.FC<{}> = () => {
|
||||
the <Link to='/patterns/centering'>Centering</Link> pattern.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -61,38 +92,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,7 +20,91 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -144,91 +228,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -56,7 +56,24 @@ const Details: React.FC<{}> = () => {
|
||||
We use the native <code>kbd</code> tag to display the keyboard shortcut.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -79,24 +96,7 @@ const Details: React.FC<{}> = () => {
|
||||
⌘ + C
|
||||
</kbd>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -19,7 +19,24 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -49,24 +66,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div style={{ textAlign: 'right' }}>— Wikipedia</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,28 +22,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Align sub-items to top */
|
||||
align-items: start;
|
||||
@@ -68,7 +47,28 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,7 +28,58 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouse over the second navigation item to see the mega menu.
|
||||
</div>
|
||||
<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 className='p-mega-menu-container'>
|
||||
<div
|
||||
@@ -91,58 +142,7 @@ const Details: React.FC<{}> = () => {
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
|
||||
|
||||
@@ -24,7 +24,67 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -136,67 +196,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns
|
||||
patterns={[
|
||||
|
||||
@@ -27,7 +27,42 @@ const Details: React.FC<{}> = () => {
|
||||
represent the button for closing the modal.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -76,42 +111,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -25,38 +25,7 @@ const Details: React.FC<{}> = () => {
|
||||
Hover on the Patterns → Navigation to see the sub dropdowns.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul className="p-nested-dropdowns">
|
||||
<li>Home</li>
|
||||
<li>
|
||||
<div>Patterns</div>
|
||||
<ul>
|
||||
<li>Layout</li>
|
||||
<li>Input</li>
|
||||
<li>
|
||||
<div>Navigation</div>
|
||||
<ul>
|
||||
<li>Breadcrumb</li>
|
||||
<li>Dropdown</li>
|
||||
<li>Menu</li>
|
||||
<li>Nested dropdown</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Display</li>
|
||||
<li>Feedback</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Products</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
/* The root */
|
||||
.p-nested-dropdowns {
|
||||
@@ -144,7 +113,38 @@ const Details: React.FC<{}> = () => {
|
||||
<li>About</li>
|
||||
</ul>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul className="p-nested-dropdowns">
|
||||
<li>Home</li>
|
||||
<li>
|
||||
<div>Patterns</div>
|
||||
<ul>
|
||||
<li>Layout</li>
|
||||
<li>Input</li>
|
||||
<li>
|
||||
<div>Navigation</div>
|
||||
<ul>
|
||||
<li>Breadcrumb</li>
|
||||
<li>Dropdown</li>
|
||||
<li>Menu</li>
|
||||
<li>Nested dropdown</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Display</li>
|
||||
<li>Feedback</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Products</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
|
||||
|
||||
@@ -26,7 +26,20 @@ const Details: React.FC<{}> = () => {
|
||||
represent the button for closing the notification.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
html={`
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
<!-- Close button sticks to the right -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -64,20 +77,7 @@ const Details: React.FC<{}> = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
<!-- Close button sticks to the right -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,40 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -68,40 +101,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.VideoBackground]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,7 +21,43 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -108,43 +144,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,190 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '300px',
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '32px',
|
||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '32px',
|
||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -431,7 +248,190 @@ const Details: React.FC<{}> = () => {
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '300px',
|
||||
marginBottom: '16px',
|
||||
position: 'relative',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '32px',
|
||||
transform: 'translate(50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '32px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '-16px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: '32px',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '32px',
|
||||
transform: 'translate(-50%, 50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: '32px',
|
||||
height: '16px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
|
||||
|
||||
@@ -21,7 +21,33 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -54,33 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -20,7 +20,21 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -71,21 +85,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -28,7 +28,50 @@ const Details: React.FC<{}> = () => {
|
||||
indicate the most popular option.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -108,50 +151,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
|
||||
|
||||
@@ -25,7 +25,37 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -62,37 +92,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -40,7 +40,34 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -70,34 +97,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -60,7 +60,29 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -116,29 +138,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Accordion]} />
|
||||
|
||||
@@ -80,21 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||
<RadialProgress percentages={80} />
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
@@ -178,7 +164,21 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
|
||||
<RadialProgress percentages={80} />
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -56,39 +56,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-radio-button-group"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '80px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '120px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-radio-button-group label {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@@ -144,7 +112,39 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-radio-button-group"
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
}}
|
||||
>
|
||||
<Radio value='1'>
|
||||
<div style={{ width: '80px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='2'>
|
||||
<div style={{ width: '120px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
<Radio value='3'>
|
||||
<div style={{ width: '100px' }}><Rectangle /></div>
|
||||
</Radio>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
|
||||
|
||||
@@ -24,7 +24,36 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -97,36 +126,7 @@ const Details: React.FC<{}> = () => {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
@@ -20,25 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="p-rating">
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={true} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-rating {
|
||||
/* Center the content */
|
||||
@@ -88,7 +70,25 @@ Note that we use \`flex-direction: row-reverse\` on the container
|
||||
<button class="p-rating-star">★</button>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="p-rating">
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={false} />
|
||||
<Star isActive={true} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,125 +23,7 @@ const Details: React.FC<{}> = () => {
|
||||
the cursors which indicate the associated side can be resized.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: '50%',
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px dashed rgba(0, 0, 0, 0.3);
|
||||
@@ -305,7 +187,125 @@ const Details: React.FC<{}> = () => {
|
||||
"/>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px dashed rgba(0, 0, 0, 0.3)',
|
||||
height: '200px',
|
||||
position: 'relative',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
left: '50%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '50%',
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nwse-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'ns-resize',
|
||||
height: '12px',
|
||||
position: 'absolute',
|
||||
right: '50%',
|
||||
transform: 'translate(50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
bottom: 0,
|
||||
cursor: 'nesw-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
cursor: 'ew-resize',
|
||||
height: '12px',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '12px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,76 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -168,7 +99,76 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#BBB',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderLeftColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
left: '-24px',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '8px solid transparent',
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopColor: '#AAA',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '16px solid #CCC',
|
||||
borderRightColor: 'transparent',
|
||||
bottom: '-8px',
|
||||
position: 'absolute',
|
||||
right: '-24px',
|
||||
zIndex: -1,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
|
||||
|
||||
@@ -21,7 +21,39 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -91,39 +123,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,7 +20,32 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -77,32 +102,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,7 +20,39 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -60,39 +92,7 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,27 @@ const Details: React.FC<{}> = () => {
|
||||
<div className='p-8 pb-20'>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
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={{
|
||||
@@ -50,27 +70,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,33 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -103,33 +129,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.CardLayout]} />
|
||||
|
||||
@@ -21,32 +21,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
|
||||
<Circle size={32} />
|
||||
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
@@ -89,7 +64,32 @@ const Details: React.FC<{}> = () => {
|
||||
"></div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
|
||||
<Circle size={32} />
|
||||
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -26,7 +26,49 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -86,49 +128,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.StepperInput]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -21,7 +21,32 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -50,32 +75,7 @@ const Details: React.FC<{}> = () => {
|
||||
<li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -22,7 +22,21 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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={{
|
||||
@@ -52,21 +66,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="display: flex;">
|
||||
<!-- Left content -->
|
||||
<div style="flex: 1;">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Right content -->
|
||||
<div style="flex: 1;">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,7 +20,39 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -64,39 +96,7 @@ const Details: React.FC<{}> = () => {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.Card]} />
|
||||
|
||||
@@ -19,7 +19,30 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -50,30 +73,7 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -20,34 +20,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||
{random(1000, 9999).toLocaleString()}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||
stars
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<div style="
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
@@ -76,7 +49,34 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '4rem', fontWeight: 500 }}>
|
||||
{random(1000, 9999).toLocaleString()}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
||||
stars
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,39 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -54,39 +86,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
|
||||
@@ -29,7 +29,51 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -99,51 +143,7 @@ const Details: React.FC<{}> = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.SpinButton]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -24,7 +24,25 @@ const Details: React.FC<{}> = () => {
|
||||
The footer always sticks to the bottom if the main content is short.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -54,25 +72,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</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.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
html={`
|
||||
<div>
|
||||
<header style="
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
">
|
||||
...
|
||||
</header>
|
||||
<main>
|
||||
...
|
||||
</main>
|
||||
</div>
|
||||
`}
|
||||
css={``}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
@@ -44,22 +59,7 @@ const Details: React.FC<{}> = () => {
|
||||
<div><Block numberOfBlocks={30} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div>
|
||||
<header style="
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
">
|
||||
...
|
||||
</header>
|
||||
<main>
|
||||
...
|
||||
</main>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
height: '100%',
|
||||
@@ -58,29 +80,7 @@ const Details: React.FC<{}> = () => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
<div style="
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
">
|
||||
<section style="
|
||||
/* Take full size */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
/* Stick to the top */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
">
|
||||
...
|
||||
</section>
|
||||
|
||||
<!-- Repeat other sections -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -123,33 +149,7 @@ const Details: React.FC<{}> = () => {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -94,33 +120,7 @@ const Details: React.FC<{}> = () => {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns
|
||||
|
||||
@@ -27,7 +27,47 @@ const Details: React.FC<{}> = () => {
|
||||
the checkbox will be checked even though it's hidden.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -67,47 +107,7 @@ const Details: React.FC<{}> = () => {
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -46,7 +46,38 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -81,38 +112,7 @@ const Details: React.FC<{}> = () => {
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -23,7 +23,34 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -51,34 +78,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,7 +22,76 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -91,76 +160,7 @@ const Details: React.FC<{}> = () => {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,7 +22,31 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -79,31 +103,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -27,39 +27,7 @@ const Details: React.FC<{}> = () => {
|
||||
Move the mouser over the main element to see the tooltip.
|
||||
</div>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip"
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip-content"
|
||||
style={{
|
||||
padding: '8px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="p-tooltip-arrow" />
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
html={`
|
||||
<style>
|
||||
.p-tooltip {
|
||||
/* Used to position the arrow */
|
||||
@@ -126,7 +94,39 @@ const Details: React.FC<{}> = () => {
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
css={``}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip"
|
||||
style={{
|
||||
marginBottom: '16px',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-tooltip-content"
|
||||
style={{
|
||||
padding: '8px',
|
||||
width: '200px',
|
||||
}}
|
||||
>
|
||||
<Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="p-tooltip-arrow" />
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.PopoverArrow]} />
|
||||
|
||||
@@ -20,7 +20,109 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -159,109 +261,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
|
||||
<RelatedPatterns patterns={[Pattern.ArrowButtons]} />
|
||||
|
||||
@@ -23,7 +23,43 @@ const Details: React.FC<{}> = () => {
|
||||
You can click the button to choose a file.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -82,43 +118,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -19,7 +19,41 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -114,41 +148,7 @@ const Details: React.FC<{}> = () => {
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -24,7 +24,65 @@ const Details: React.FC<{}> = () => {
|
||||
In this pattern, the video is displayed in the background.
|
||||
</div>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -83,65 +141,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
<RelatedPatterns patterns={[Pattern.FullBackground, Pattern.OverlayPlayButton]} />
|
||||
</DetailsLayout>
|
||||
|
||||
@@ -20,7 +20,53 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -78,53 +124,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -22,7 +22,73 @@ const Details: React.FC<{}> = () => {
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
@@ -114,73 +180,7 @@ const Details: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
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>
|
||||
`}
|
||||
/>
|
||||
</BrowserFrame>
|
||||
</div>
|
||||
</DetailsLayout>
|
||||
);
|
||||
|
||||
@@ -9,18 +9,21 @@ import SampleCode from '../components/SampleCode';
|
||||
import './browserFrame.css';
|
||||
|
||||
interface BrowserFrameProps {
|
||||
content: React.ReactNode;
|
||||
source?: string;
|
||||
css: string;
|
||||
html: string;
|
||||
}
|
||||
|
||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
|
||||
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
|
||||
return (
|
||||
<div className="demo">
|
||||
<div className="demo__source">
|
||||
{source && <SampleCode fullHeight={true} lang="html" code={source} />}
|
||||
<div className="demo__html">
|
||||
<SampleCode fullHeight={true} lang="html" code={html} />
|
||||
</div>
|
||||
<div className="demo__css">
|
||||
<SampleCode fullHeight={true} lang="css" code={css} />
|
||||
</div>
|
||||
<div className="demo__live">
|
||||
{content}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,12 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.demo__source,
|
||||
.demo__live {
|
||||
height: 32rem;
|
||||
}
|
||||
.demo__css,
|
||||
.demo__html {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
height: 16rem;
|
||||
overflow: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user