mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-13 01:24:36 +02:00
Code Issues Releases Wiki Activity

Add CSS panel for display patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 21:33:21 +07:00
parent 04384dbee2
commit 57b8bff9bb
42 changed files with 1008 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
client/patterns/arrow-buttons/Details.tsx
View File

@@ -22,94 +22,43 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Up arrow button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- 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>
<div class="container__arrow container__arrow--up"></div>
<!-- Content -->
...
</button>
<!-- Right arrow button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- 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>
<div class="container__arrow container__arrow--right"></div>
</button>
<!-- Down arrow button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- 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>
<div class="container__arrow container__arrow--down"></div>
<!-- Content -->
...
</button>
<!-- Left arrow button -->
<button style="
<button class="container">
<!-- Arrow -->
<div class="container__arrow container__arrow--left"></div>
<!-- Content -->
...
</button>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -117,27 +66,44 @@ html={`
/* 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);
.container__arrow {
/* Transparent background */
background-color: transparent;
/* Size */
height: 12px;
width: 12px;
"></div>
/* Size */
height: 12px;
width: 12px;
}
<!-- Content -->
...
</button>
`}
css={`
.container__arrow--up {
/* 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);
}
.container__arrow--right {
/* 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);
}
.container__arrow--down {
/* 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);
}
.container__arrow--left {
/* 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);
}
`}
>
<div

46
client/patterns/avatar-list/Details.tsx
View File

@@ -41,26 +41,10 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
display: flex;
">
<div class="container">
<!-- Avatar item -->
<div style="
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
">
<div style="
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
">
<div class="container__item">
<div class="container__avatar">
<!-- Image -->
...
</div>
@@ -70,7 +54,29 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
display: flex;
}
.container__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
}
.container__avatar {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
}
`}
>
<div
style={{

31
client/patterns/avatar/Details.tsx
View File

@@ -21,27 +21,28 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Avatar image -->
<img class="container__avatar" src="..." />
</div>
`}
css={`
.container {
/* 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>
.container__avatar {
/* Rounded border */
border-radius: 50%;
/* Take full size */
height: 100%;
width: 100%;
}
`}
css={``}
>
<div
style={{

12
client/patterns/badge/Details.tsx
View File

@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
...
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -35,11 +40,8 @@ html={`
border-radius: 9999px;
height: 32px;
width: 32px;
">
...
</div>
}
`}
css={``}
>
<div
style={{

32
client/patterns/card/Details.tsx
View File

@@ -23,29 +23,35 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
display: flex;
flex-direction: column;
">
<div class="container">
<!-- Cover -->
<div style="
height: 150px;
width: 100%;
">
<div class="container__cover">
...
</div>
<!-- Content -->
<div style="
/* Take available height */
flex: 1;
">
<div class="container__content">
...
</div>
...
</div>
`}
css={``}
css={`
.container {
display: flex;
flex-direction: column;
}
.container__cover {
height: 150px;
width: 100%;
}
.container__content {
/* Take available height */
flex: 1;
}
`}
>
<div
style={{

14
client/patterns/centering/Details.tsx
View File

@@ -22,15 +22,17 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
align-items: center;
display: flex;
justify-content: center;
">
<div class="container">
...
</div>
`}
css={``}
css={`
.container {
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{

66
client/patterns/close-button/Details.tsx
View File

@@ -21,7 +21,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<button style="
<button class="container">
<div class="container__line container__line--first"></div>
<div class="container__line container__line--second"></div>
</button>
`}
css={`
.container {
/* Reset */
background-color: transparent;
border-color: transparent;
@@ -35,39 +42,42 @@ html={`
/* Used to position the inner */
position: relative;
">
<div style="
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
}
/* Position */
left: 0px;
position: absolute;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
.container__line {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Size */
height: 1px;
width: 100%;
" />
/* Position */
position: absolute;
<div style="
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Size */
height: 1px;
width: 100%;
}
/* Position */
left: 50%;
position: absolute;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
.container__line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
" />
</button>
/* Size */
height: 1px;
width: 100%;
}
.container__line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
`}
css={``}
>
<div
style={{

30
client/patterns/cookie-banner/Details.tsx
View File

@@ -23,7 +23,18 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Tells visitors that the website uses cookie -->
<div class="container__content">
...
</div>
<!-- Close button -->
...
</div>
`}
css={`
.container {
/* Banner is displayed at the bottom */
bottom: 0;
left: 0;
@@ -34,20 +45,13 @@ html={`
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>
.container__content {
/* Take available width */
flex: 1;
}
`}
css={``}
>
<div
style={{

78
client/patterns/corner-ribbon/Details.tsx
View File

@@ -23,49 +23,55 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- The container -->
<div style="
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 100px;
width: 100px;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
">
<div class="container__wrapper">
<!-- The ribbon -->
<div style="
/* Position */
left: -64px;
position: absolute;
top: 32px;
/* Size */
height: 24px;
width: 206px;
/* Displayed diagonally */
transform: rotate(-45deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Centerize the text content */
text-align: center;
">
<div class="container__ribbon">
...
</div>
</div>
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.container__wrapper {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 100px;
width: 100px;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
.container__ribbon {
/* Position */
left: -64px;
position: absolute;
top: 32px;
/* Size */
height: 24px;
width: 206px;
/* Displayed diagonally */
transform: rotate(-45deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Centerize the text content */
text-align: center;
}
`}
>
<div
style={{

12
client/patterns/curved-background/Details.tsx
View File

@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
...
</div>
`}
css={`
.container {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
@@ -31,11 +36,8 @@ html={`
/* Curved corners */
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
">
...
</div>
}
`}
css={``}
>
<div
style={{

52
client/patterns/diagonal-section/Details.tsx
View File

@@ -22,36 +22,40 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Used to position the diagonal area */
position: relative;
">
<div class="container">
<!-- 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;
" />
<div class="container__diagonal"></div>
<!-- Content -->
...
</div>
`}
css={``}
css={`
.container {
/* Used to position the diagonal area */
position: relative;
}
.container__diagonal {
/* 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;
}
`}
>
<div
style={{

34
client/patterns/docked-at-corner/Details.tsx
View File

@@ -23,28 +23,32 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- 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 class="container__docker">
...
</div>
...
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.container__docker {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{

38
client/patterns/dot-leader/Details.tsx
View File

@@ -24,32 +24,36 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
">
<div class="container">
<!-- 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;
" />
<div class="container__dots"></div>
<!-- Right side -->
<div>...</div>
</div>
`}
css={``}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.container__dots {
/* Bottom border */
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
/* Take remaining width */
flex: 1;
/* Spacing */
margin: 0px 4px;
}
`}
>
<div
style={{

12
client/patterns/drop-area/Details.tsx
View File

@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
...
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -30,11 +35,8 @@ html={`
/* Border */
border: 4px dashed rgba(0, 0, 0, 0.3),
border-radius: 4px;
">
...
</div>
}
`}
css={``}
>
<div
style={{

14
client/patterns/drop-cap/Details.tsx
View File

@@ -22,9 +22,13 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<style>
<div class="container">
...
</div>
`}
css={`
/* Styles for the first letter */
.p-drop-cap:first-letter {
.container:first-letter {
/* Display at the left */
float: left;
line-height: 1;
@@ -37,13 +41,7 @@ html={`
font-size: 64px;
font-weight: 700;
}
</style>
<div class="p-drop-cap">
...
</div>
`}
css={``}
>
<div
style={{

56
client/patterns/fading-long-section/Details.tsx
View File

@@ -24,38 +24,44 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
/* Used to position the faded element */
position: relative;
">
<div class="container"
<!-- Main content -->
<div style="
/* Height */
height: 200px;
/* Scrollable */
overflow-y: scroll;
">
<div class="container__content">
...
</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 class="container__fading"></div>
</div>
`}
css={``}
css={`
.container {
/* Used to position the faded element */
position: relative;
}
.container__content {
/* Height */
height: 200px;
/* Scrollable */
overflow-y: scroll;
}
.container__fading {
/* 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
style={{

58
client/patterns/feature-comparison/Details.tsx
View File

@@ -24,36 +24,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
align-items: center;
display: flex;
/* Bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/* Spacing */
padding: 12px 0px;
">
<div class="container">
<!-- Feature name -->
<div style="
/* Take available width */
flex: 1;
/* Spacing */
margin-right: 16px;
">
<div class="container__feature">
...
</div>
<!-- The model -->
<div style="
/* Center the content */
display: flex;
justify-content: center;
/* Spacing */
margin-right: 16px;
">
<div class="container__model">
<!--
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
@@ -68,7 +46,35 @@ html={`
<!-- Repeated items -->
...
`}
css={``}
css={`
.container {
align-items: center;
display: flex;
/* Bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/* Spacing */
padding: 12px 0px;
}
.container__feature {
/* Take available width */
flex: 1;
/* Spacing */
margin-right: 16px;
}
.container__model {
/* Center the content */
display: flex;
justify-content: center;
/* Spacing */
margin-right: 16px;
}
`}
>
<div
style={{

40
client/patterns/feature-list/Details.tsx
View File

@@ -25,27 +25,14 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Feature item -->
<div style="
display: flex;
/* OPTIONAL: Reverse the order of image and content */
flex-direction: row-reverse;
/* OPTIONAL: Spacing between items */
margin: 16px 0;
">
<div class="container">
<!-- Image -->
<div style="
width: 128px;
">
<div class="container__image">
...
</div>
<!-- Right side -->
<div style="
/* Take the remaining width */
flex: 1;
">
<div class="container__feature">
...
</div>
</div>
@@ -53,7 +40,26 @@ html={`
<!-- Repeated items -->
...
`}
css={``}
css={`
.container {
display: flex;
/* OPTIONAL: Reverse the order of image and content */
flex-direction: row-reverse;
/* OPTIONAL: Spacing between items */
margin: 16px 0;
}
.container__image {
width: 128px;
}
.container__feature {
/* Take the remaining width */
flex: 1;
}
`}
>
<div
style={{

58
client/patterns/fixed-at-corner/Details.tsx
View File

@@ -22,47 +22,57 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- Top-left corner -->
<div style="
left: 0;
position: absolute;
top: 0;
">
<div class="container__corner container__corner--tl">
...
</div>
<!-- Top-right corner -->
<div style="
position: absolute;
top: 0;
right: 0;
">
<div class="container__corner container__corner--tr">
...
</div>
<!-- Bottom-right corner -->
<div style="
bottom: 0;
position: absolute;
right: 0;
">
<div class="container__corner container__corner--br">
...
</div>
<!-- Bottom-left corner -->
<div style="
bottom: 0;
left: 0;
position: absolute;
">
<div class="container__corner container__corner--bl">
...
</div>
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.container__corner {
position: absolute;
}
.container__corner--tl {
left: 0;
top: 0;
}
.container__corner--tr {
top: 0;
right: 0;
}
.container__corner--br {
bottom: 0;
right: 0;
}
.container__corner--bl {
bottom: 0;
left: 0;
}
`}
>
<div style={{ height: '100%', position: 'relative' }}>
<div style={{ left: 0, position: 'absolute', top: 0 }}>

12
client/patterns/fixed-at-side/Details.tsx
View File

@@ -23,16 +23,18 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Fixed at the middle of side -->
<div style="
<div class="container">
...
</div>
`}
css={`
.container {
right: 0;
position: fixed;
top: 50%;
transform: translate(0px, -50%);
">
...
</div>
}
`}
css={``}
>
<div
style={{

12
client/patterns/full-background/Details.tsx
View File

@@ -22,7 +22,12 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
...
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -35,11 +40,8 @@ html={`
/* Background */
background: url('/assets/full-background.jpeg') center center / cover no-repeat;
">
...
</div>
}
`}
css={``}
>
<div
style={{

32
client/patterns/initial-avatar/Details.tsx
View File

@@ -26,7 +26,15 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
<div class="container">
<div class="container__letters">
<!-- The letters -->
...
</div>
</div>
`}
css={`
.container {
/* Center the content */
display: inline-block;
vertical-align: middle;
@@ -42,20 +50,16 @@ html={`
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>
}
.container__letters {
/* Center the content */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
`}
css={``}
>
<div
style={{

15
client/patterns/keyboard-shortcut/Details.tsx
View File

@@ -57,22 +57,25 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<kbd style="
<kbd class="container">
...
</kbd>
`}
css={`
.container {
/* 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;
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={{

12
client/patterns/lined-paper/Details.tsx
View File

@@ -20,7 +20,12 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
...
</div>
`}
css={`
.container {
/* Lined background */
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
background-size: 100% 2em;
@@ -31,11 +36,8 @@ html={`
*/
background-position-y: 24px;
line-height: 2em;
">
...
</div>
}
`}
css={``}
>
<div
style={{

38
client/patterns/media-object/Details.tsx
View File

@@ -23,31 +23,37 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Align sub-items to top */
align-items: start;
display: flex;
">
<div class="container">
<!-- Media object -->
<div style="
margin-right: 16px;
/* Set the width for the media object */
width: 200px;
">
<div class="container__media">
...
</div>
<!-- Main content -->
<div style="
/* Take the remaining width */
flex: 1;
">
<div class="container__content">
...
</div>
</div>
`}
css={``}
css={`
.container {
/* Align sub-items to top */
align-items: start;
display: flex;
}
.container__media {
margin-right: 16px;
/* Set the width for the media object */
width: 200px;
}
.container__content {
/* Take the remaining width */
flex: 1;
}
`}
>
<div
style={{

50
client/patterns/overlay-play-button/Details.tsx
View File

@@ -22,38 +22,42 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Used to position the overlay */
position: relative;
">
<div class="container">
<!-- 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)',
">
<div class="container__overlay">
<!-- The player button -->
...
</div>
</div>
`}
css={``}
css={`
.container {
/* Used to position the overlay */
position: relative;
}
.container__overlay {
/* 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);
}
`}
>
<div
style={{

52
client/patterns/pricing-table/Details.tsx
View File

@@ -29,30 +29,9 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
/* Content is centered horizontally */
align-items: center;
display: flex;
justify-content: center;
">
<div class="container">
<!-- 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;
">
<div class="container__column">
<!-- Title -->
...
@@ -70,7 +49,32 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
justify-content: center;
}
.container__column {
/* 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;
}
`}
>
<div
style={{

20
client/patterns/property-list/Details.tsx
View File

@@ -42,7 +42,16 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- A property item -->
<dl style="
<dl class="container">
<!-- Property name -->
<dt>...</dt>
<!-- Property value -->
<dd>...</dd>
</dl>
`}
css={`
.container {
/* Content is center horizontally */
align-items: center;
display: flex;
@@ -58,15 +67,8 @@ html={`
/* Spacing */
margin: 0px;
padding: 8px 0px;
">
<!-- Property name -->
<dt>...</dt>
<!-- Property value -->
<dd>...</dd>
</dl>
}
`}
css={``}
>
<div
style={{

22
client/patterns/questions-and-answers/Details.tsx
View File

@@ -62,15 +62,9 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Each question and answer item -->
<div style="
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
">
<div class="container">
<!-- Heading -->
<div style="
display: flex;
align-items: center;
justify-content: space-between;
">
<div class="container__heading">
<!-- Question -->
...
@@ -81,7 +75,17 @@ html={`
<!-- Answer -->
</div>
`}
css={``}
css={`
.container {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.container__heading {
display: flex;
align-items: center;
justify-content: space-between;
}
`}
>
<div
style={{

107
client/patterns/ribbon/Details.tsx
View File

@@ -22,7 +22,25 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- The content -->
...
<!-- The left side -->
<div class="container__side container__side--left"></div>
<!-- The left triangle displayed below the content -->
<div class="container__triangle container__triangle--left"></div>
<!-- The right triangle displayed below the content -->
<div class="container__triangle container__triangle--right"></div>
<!-- The right side -->
<div class="container__side container__side--right"></div>
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -36,70 +54,49 @@ html={`
/* Use to position the corners */
position: relative;
">
<!-- The content -->
...
}
<!-- The left side -->
<div style="
/* Position */
bottom: -8px;
position: absolute;
left: -24px;
.container__side {
bottom: -8px;
position: absolute;
/* Displayed under the container */
z-index: -1;
/* Displayed under the container */
z-index: -1;
/* Background */
border: 16px solid #CCC;
border-left-color: transparent;
"
/>
/* Background */
border: 16px solid #CCC;
border-left-color: transparent;
}
<!-- The left triangle displayed below the content -->
<div style="
left: 0;
position: absolute;
top: 100%;
.container__side--left {
/* Position */
left: -24px;
}
/* Background */
border: 8px solid transparent;
border-bottom-width: 0;
border-right-width: 0;
border-top-color: #AAA;
" />
.container__side--right {
/* Position */
right: -24px;
}
<!-- The right triangle displayed below the content -->
<div style="
position: absolute;
right: 0;
top: 100%;
.container__triangle {
position: absolute;
top: 100%;
/* Background */
border: 8px solid transparent;
border-bottom-width: 0;
border-left-width: 0;
border-top-color: #AAA;
" />
border: 8px solid transparent;
border-bottom-width: 0;
border-top-color: #AAA;
}
<!-- The right side -->
<div style="
/* Position */
bottom: -8px;
position: absolute;
right: -24px;
.container__triangle--left {
border-right-width: 0;
left: 0;
}
/* Displayed under the container */
z-index: -1;
/* Background */
border: 16px solid #CCC;
border-right-color: transparent;
"
/>
</div>
.container__triangle--right {
border-left-width: 0;
right: 0;
}
`}
css={``}
>
<div
style={{

50
client/patterns/separator/Details.tsx
View File

@@ -21,37 +21,43 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Text -->
<div class="container__content">
...
</div>
<!-- Separator line -->
<div class="container__separator"></div>
</div>
`}
css={`
.container {
/* 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>
.container__content {
/* We won't see the separator line */
background: #FFF;
<!-- Separator line -->
<div style="
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
width: 100%;
" />
</div>
/* Displayed at the center of container */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.container__separator {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
width: 100%;
}
`}
css={``}
>
<div
style={{

54
client/patterns/stacked-cards/Details.tsx
View File

@@ -21,37 +21,41 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Used to position the stacked cards */
position: relative;
">
<div class="container">
<!-- 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);
" />
<div class="container__card"></div>
<!-- Main card's content -->
...
</div>
`}
css={``}
css={`
.container {
/* Used to position the stacked cards */
position: relative;
}
.container__card {
/* 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);
}
`}
>
<div
style={{

28
client/patterns/stamp-border/Details.tsx
View File

@@ -20,7 +20,16 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Inner -->
<div class="container__inner">
<!-- Content -->
...
</div>
</div>
`}
css={`
.container {
/* Background */
background-color: #ccc;
background-image: radial-gradient(#fff 50%, transparent 50%);
@@ -30,18 +39,13 @@ html={`
/* Spacing */
padding: 5px;
">
<!-- Inner -->
<div style="
/* Background */
background-color: #ccc;
">
<!-- Content -->
...
</div>
</div>
}
.container__inner {
/* Background */
background-color: #ccc;
}
`}
css={``}
>
<div
style={{

46
client/patterns/statistic/Details.tsx
View File

@@ -21,35 +21,41 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Center the content */
align-items: center;
display: inline-flex;
flex-direction: column;
">
<div class="container">
<!-- Value -->
<div style="
/* Big font size */
font-size: 4rem;
font-weight: 500;
">
<div class="container__value">
...
</div>
<!-- Label -->
<div style="
/* Smaller font size */
font-size: 1rem;
font-weight: 700;
/* Uppercase the label */
text-transform: uppercase;
">
<div class="container__label">
...
</div>
</div>
`}
css={``}
css={`
.container {
/* Center the content */
align-items: center;
display: inline-flex;
flex-direction: column;
}
.container__value {
/* Big font size */
font-size: 4rem;
font-weight: 500;
}
.container__label {
/* Smaller font size */
font-size: 1rem;
font-weight: 700;
/* Uppercase the label */
text-transform: uppercase;
}
`}
>
<div
style={{

54
client/patterns/status-light/Details.tsx
View File

@@ -22,37 +22,43 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Center the content */
align-items: center;
display: flex;
">
<div class="container">
<!-- 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>
<div class="container__status"></div>
<!-- Content -->
<div style="
/* Take available width */
flex: 1;
">
<div class="container__content">
...
</div>
</div>
`}
css={``}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
}
.container__status {
/* Background color */
background-color: rgb(66, 153, 225);
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 8px;
width: 8px;
/* Spacing */
margin-right: 8px;
}
.container__content {
/* Take available width */
flex: 1;
}
`}
>
<div
style={{

26
client/patterns/sticky-table-column/Details.tsx
View File

@@ -31,17 +31,7 @@ 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 class="header">
...
</th>
@@ -52,7 +42,19 @@ html={`
</tbody>
</table>
`}
css={``}
css={`
.header {
/* Background color */
background-color: #ddd;
/* Stick to the left */
left: 0;
position: sticky;
/* Displayed on top of other rows when scrolling */
z-index: 9999;
}
`}
>
<div
style={{

26
client/patterns/sticky-table-headers/Details.tsx
View File

@@ -29,17 +29,7 @@ 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 class="header">
...
</th>
@@ -50,7 +40,19 @@ html={`
</tbody>
</table>
`}
css={``}
css={`
.header {
/* Background color */
background-color: #ddd;
/* Stick to the top */
position: sticky;
top: 0;
/* Displayed on top of other rows when scrolling */
z-index: 9999;
}
`}
>
<div
style={{

24
client/patterns/teardrop/Details.tsx
View File

@@ -24,7 +24,15 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Display the content vertically -->
<div class="container__content">
...
</div>
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -40,16 +48,12 @@ html={`
/* Size */
height: 64px;
width: 64px;
">
<!-- Display the content vertically -->
<div style="
transform: rotate(-45deg);
">
...
</div>
</div>
}
.container__content {
transform: rotate(-45deg);
}
`}
css={``}
>
<div
style={{

110
client/patterns/timeline/Details.tsx
View File

@@ -23,64 +23,27 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Used to position the left vertical line */
position: relative;
">
<div class="container">
<!-- 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%;
" />
<div class="container__line"></div>
<!-- The timeline items container -->
<ul style="
/* Reset styles */
list-style-type: none;
margin: 0px;
padding: 0px;
">
<ul class="container__items">
<!-- Each timeline item -->
<li style="margin-bottom: 8px;">
<li class="container__item">
<!-- The circle and title -->
<div style="
/* Center the content horizontally */
align-items: center;
display: flex;
">
<div class="container__top">
<!-- The circle -->
<div style="
/* Rounded border */
background-color: rgb(170, 170, 170);
border-radius: 9999px;
/* Size */
height: 32px;
width: 32px;
" />
<div class="container__circle"></div>
<!-- The title -->
<div style="
/* Take available width */
flex: 1;
">
<div class="container__title">
...
</div>
</div>
<!-- The description -->
<div style="
/* Make it align with the title */
margin-left: 48px;
">
<div class="container__desc">
...
</div>
</li>
@@ -90,7 +53,62 @@ html={`
</ul>
</div>
`}
css={``}
css={`
.container {
/* Used to position the left vertical line */
position: relative;
}
.container__line {
/* Border */
border-right: 2px solid #aaa;
/* Positioned at the left */
left: 16px;
position: absolute;
top: 0px;
/* Take full height */
height: 100%;
}
.container__items {
/* Reset styles */
list-style-type: none;
margin: 0px;
padding: 0px;
}
.container__item {
margin-bottom: 8px;
}
.container__top {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.container__circle {
/* Rounded border */
background-color: rgb(170, 170, 170);
border-radius: 9999px;
/* Size */
height: 32px;
width: 32px;
}
.container__title {
/* Take available width */
flex: 1;
}
.container__desc {
/* Make it align with the title */
margin-left: 48px;
}
`}
>
<div
style={{

112
client/patterns/triangle-buttons/Details.tsx
View File

@@ -22,82 +22,43 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Up triangle button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- 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>
<div class="container__triangle container__triangle--up"></div>
<!-- Content -->
...
</button>
<!-- Right triangle button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- 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>
<div class="container__triangle container__triangle--right"></div>
</button>
<!-- Down triangle button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- 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>
<div class="container__triangle container__triangle--down"></div>
<!-- Content -->
...
</button>
<!-- Left triangle button -->
<button style="
<button class="container">
<!-- Triangle -->
<div class="container__triangle container__triangle--left"></div>
<!-- Content -->
...
</button>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -105,23 +66,36 @@ html={`
/* 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>
.container__triangle {
border-style: solid;
<!-- Content -->
...
</button>
/* Size */
height: 0px;
width: 0px;
}
.container__triangle--up {
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-width: 0px 8px 8px;
}
.container__triangle--right {
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
border-width: 8px 0px 8px 8px;
}
.container__triangle--down {
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 8px 8px 0px;
}
.container__triangle--left {
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 8px 8px 8px 0px;
}
`}
css={``}
>
<div
style={{

105
client/patterns/video-background/Details.tsx
View File

@@ -25,63 +25,70 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
/* Used to position the video and content */
position: relative;
">
<div class="container">
<!-- 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 class="container__wrapper">
<video class="container__video" src="...">
...
</video>
</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 class="container__content">
...
</div>
</div>
`}
css={``}
css={`
.container {
/* Used to position the video and content */
position: relative;
}
.container__wrapper {
/* Positioned at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Hide the scrollbar */
overflow: hidden;
}
.container__video {
object-fit: cover;
/* Center the video */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
/* Take full width */
width: 100%;
}
.container__content {
/* 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
style={{

76
client/patterns/watermark/Details.tsx
View File

@@ -21,42 +21,11 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Used to position the watermark */
position: relative;
">
<div class="container">
<!-- 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%;
">
<div class="container__wrapper">
<!-- 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;
">
<div class="container__watermark">
Draft
</div>
</div>
@@ -65,7 +34,44 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
/* Used to position the watermark */
position: relative;
}
.container__wrapper {
/* 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%;
}
.container__watermark {
/* 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;
}
`}
>
<div
style={{