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

Add CSS code for navigation patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 16:58:58 +07:00
parent 9156f3a5cc
commit 39b2f3383b
20 changed files with 549 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/patterns/breadcrumb/Details.tsx
View File

@@ -21,22 +21,27 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Content is centered vertically */
align-items: center;
display: flex;
">
<div class="container">
<!-- Breadcrumb item -->
<a>...</a>
<!-- Separator -->
<div style="margin: 0 8px;">/</div>
<div class="separator">/</div>
<!-- Repeated items and separators -->
...
</div>
`}
css={``}
css={`
.container {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.separator {
margin: 0 8px;
}
`}
>
<div
style={{

81
client/patterns/circular-navigation/Details.tsx
View File

@@ -57,48 +57,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- The trigger element that will show all circles when user clicks it -->
...
<!-- A circle menu item -->
<div style="
/* Position */
position: absolute;
top: 0;
/*
80px is the distance from the item to the trigger element.
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
in case you want to have a total of 6 menu items.
The formulation is 360 / numberOfItems * indexOfItem
*/
transform: rotate(0deg) translateX(-80px);
/* Must have the same size as the trigger element */
height: 32px;
width: 32px;
">
<div class="item">
<!-- The inner -->
<div style="
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
in case you want to have a total of 6 menu items.
The formulation is -(360 / numberOfItems * indexOfItem)
*/
transform: rotate(-0deg);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
">
<div class="inner">
<!-- The content -->
...
</div>
@@ -108,7 +74,46 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.item {
/* Position */
position: absolute;
top: 0;
/*
80px is the distance from the item to the trigger element.
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
in case you want to have a total of 6 menu items.
The formulation is 360 / numberOfItems * indexOfItem
*/
transform: rotate(0deg) translateX(-80px);
/* Must have the same size as the trigger element */
height: 32px;
width: 32px;
}
.inner {
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
in case you want to have a total of 6 menu items.
The formulation is -(360 / numberOfItems * indexOfItem)
*/
transform: rotate(-0deg);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
}
`}
>
<div
style={{

40
client/patterns/dot-navigation/Details.tsx
View File

@@ -45,7 +45,15 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<ul style="
<ul class="container">
<li class="item" />
<!-- Repeat other dots -->
...
</div>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -55,26 +63,24 @@ html={`
list-style-type: none;
margin: 0;
padding: 0;
">
<li style="
/* Rounded border */
border-radius: 9999px;
height: 12px;
width: 12px;
}
.item {
/* Rounded border */
border-radius: 9999px;
height: 12px;
width: 12px;
/* Active dot */
background-color: rgba(0, 0, 0, .3);
/* Active dot */
background-color: rgba(0, 0, 0, .3);
/* Inactive dot */
background-color: transparent;
border: 1px solid rgba(0, 0, 0, .3);
/* Inactive dot */
background-color: transparent;
border: 1px solid rgba(0, 0, 0, .3);
/* OPTIONAL: Spacing between dots */
margin: 0 4px;
" />
</div>
/* OPTIONAL: Spacing between dots */
margin: 0 4px;
}
`}
css={``}
>
<div
style={{

64
client/patterns/drawer/Details.tsx
View File

@@ -24,7 +24,18 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Backdrop -->
<div class="overlay"></div>
<!-- Sidebar -->
<div class="sidebar">
...
</div>
</div>
`}
css={`
.container {
/* Container takes full size */
height: 100%;
left: 0;
@@ -33,39 +44,32 @@ html={`
width: 100%;
z-index: 9999;
">
<!-- Backdrop -->
<div style="
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.overlay {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
" />
z-index: -1;
}
.sidebar {
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
<!-- Sidebar -->
<div style="
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
/* Background */
background-color: #fff;
">
...
</div>
</div>
/* Background */
background-color: #fff;
}
`}
css={``}
>
<div
style={{

64
client/patterns/dropdown/Details.tsx
View File

@@ -29,51 +29,45 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<style>
<div class="dropdown">
<!-- The trigger element -->
<button>...</button>
<!-- The content -->
<div class="dropdown-content">
...
</div>
</div>
`}
css={`
.dropdown {
position: relative;
}
/* Hide the dropdown's content by default -->
.dropdown-content {
display: none;
/* Position it right below the trigger element */
left: 0;
paddingTop: 4px;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #FFF;
zIndex: 9999;
/* Size */
height: 200px;
width: 200px;
}
/* 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={{

38
client/patterns/full-screen-menu/Details.tsx
View File

@@ -21,7 +21,20 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- The close button -->
<button class="close">
...
</button>
<!-- The navigation menu -->
<ul>
...
</ul>
</div>
`}
css={`
.container {
/* Full screen overlay */
height: 100%;
left: 0;
@@ -33,24 +46,15 @@ html={`
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>
.close {
/* Shown at top right corner */
position: absolute;
right: 16px;
top: 16px;
}
`}
css={``}
>
<div
style={{

50
client/patterns/mega-menu/Details.tsx
View File

@@ -29,13 +29,34 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<style>
.p-mega-menu-container {
<div class="container">
<!-- Item -->
...
<!-- An item that triggers displaying the mega menu -->
<div class="trigger">
<!-- The trigger item's content -->
<div>...</div>
<!-- Mega menu -->
<div class="content">
...
</div>
</div>
</div>
`}
css={`
.container {
/* Used to position the mega menu */
position: relative;
}
.p-mega-menu-content {
.trigger:hover .content {
/* Show the mega menu when hovering the trigger item */
display: block;
}
.content {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
margin-top: -1px;
@@ -55,30 +76,7 @@ html={`
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'>

71
client/patterns/menu/Details.tsx
View File

@@ -25,30 +25,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
display: flex;
flex-direction: column;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
">
<div class="container">
<!-- Normal menu item -->
<div style="
/* Center the content horizontally */
align-items: center;
display: flex;
">
<div class="item">
...
</div>
<!-- With hot key -->
<div style="
align-items: center;
display: flex;
/* Push the hot key to the right */
justify-content: space-between;
">
<div class="item with-shortcut">
<!-- Label -->
...
<!-- Hot key -->
@@ -56,16 +40,8 @@ html={`
</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;
">
<div class="item with-shortcut">
<div class="with-image">
<!-- Image -->
...
<!-- Label -->
@@ -77,13 +53,40 @@ html={`
</div>
<!-- Divider -->
<div style="
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
" />
<div class="divider"></div>
</div>
`}
css={``}
css={`
.container {
display: flex;
flex-direction: column;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.item {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.with-shortcut {
/* Push the hot key to the right */
justify-content: space-between;
}
.with-image {
align-items: center;
display: flex;
}
.divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
}
`}
>
<div
style={{

123
client/patterns/nested-dropdowns/Details.tsx
View File

@@ -26,68 +26,7 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<style>
/* The root */
.p-nested-dropdowns {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
/* Reset list styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.p-nested-dropdowns li {
/* Spacing */
padding: 8px;
/* Used to position the sub dropdown */
position: relative;
}
/* The sub dropdown */
.p-nested-dropdowns ul {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Hidden by default */
display: none;
/* Absolute position */
left: 0;
position: absolute;
top: 100%;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
/* Width */
width: 200px;
}
/* The second level sub dropdown */
.p-nested-dropdowns ul ul {
left: 100%;
position: absolute;
top: 0;
}
/* Change background color of list item when being hovered */
.p-nested-dropdowns li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* Show the direct sub dropdown when hovering the list item */
.p-nested-dropdowns li:hover > ul {
display: block;
}
</style>
<ul class="p-nested-dropdowns">
<ul class="container">
<li>Home</li>
<li>
<div>Patterns</div>
@@ -113,7 +52,65 @@ html={`
<li>About</li>
</ul>
`}
css={``}
css={`
.container {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
/* Reset list styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.container li {
/* Spacing */
padding: 8px;
/* Used to position the sub dropdown */
position: relative;
}
/* The sub dropdown */
.container ul {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Hidden by default */
display: none;
/* Absolute position */
left: 0;
position: absolute;
top: 100%;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
/* Width */
width: 200px;
}
/* The second level sub dropdown */
.container ul ul {
left: 100%;
position: absolute;
top: 0;
}
/* Change background color of list item when being hovered */
.container li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* Show the direct sub dropdown when hovering the list item */
.container li:hover > ul {
display: block;
}
`}
>
<div
style={{

54
client/patterns/pagination/Details.tsx
View File

@@ -22,41 +22,41 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Pagination item -->
<div style="
">
...
</div>
<!-- Repeat other items -->
...
</div>
`}
css={`
.container {
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>
.item {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
<!-- 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>
/* Right border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.item + .item {
/* No right border */
border-right: none;
}
`}
css={``}
>
<div
style={{

14
client/patterns/previous-next-buttons/Details.tsx
View File

@@ -21,11 +21,7 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
align-items: center;
display: flex;
justify-content: space-between;
">
<div class="container">
<!-- Previous link sticks to the left -->
<a>..</a>
@@ -33,7 +29,13 @@ html={`
<a>..</a>
</div>
`}
css={``}
css={`
.container {
align-items: center;
display: flex;
justify-content: space-between;
}
`}
>
<div
style={{

60
client/patterns/spin-button/Details.tsx
View File

@@ -27,47 +27,51 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
display: flex;
">
<div class="container">
<!-- Input -->
<input type="text" style="
border-color: transparent;
margin-right: 4px;
padding: 4px;
width: 100px;
" />
<input type="text" class="input" />
<!-- Buttons container -->
<div style="
/* Content is centered vertically */
display: flex;
flex-direction: column;
justify-content: center;
">
<div class="buttons">
<!-- Up button -->
<button style="
border-color: transparent;
/* Make buttons have the same height */
flex: 1,
">
<button class="button">
...
</button>
<!-- Down button -->
<button style="
border-color: transparent;
/* Make buttons have the same height */
flex: 1,
">
<button class="button">
...
</button>
</div>
</div>
`}
css={``}
css={`
.container {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
display: flex;
}
.input {
border-color: transparent;
margin-right: 4px;
padding: 4px;
width: 100px;
}
.buttons {
/* Content is centered vertically */
display: flex;
flex-direction: column;
justify-content: center;
}
.button {
border-color: transparent;
/* Make buttons have the same height */
flex: 1,
}
`}
>
<div
style={{

34
client/patterns/split-navigation/Details.tsx
View File

@@ -22,7 +22,20 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<ul style="
<ul class="container">
<!-- Navigation item -->
<li>
<a href="">...</a>
</li>
<!-- Navigation item that sticks to the right -->
<li class="item-right">
<a href="">...</a>
</li>
</ul>
`}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
@@ -30,22 +43,13 @@ html={`
/* 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>
.item-right {
/* Sticks to the right */
margin-left: auto;
}
`}
css={``}
>
<div
style={{

62
client/patterns/stepper-input/Details.tsx
View File

@@ -30,7 +30,21 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- Minus button -->
<button class="button">-</button>
<!-- Input container -->
<div class="input-container">
<input type="text" class="input" />
</div>
<!-- Plus button -->
<button class="button">+</button>
</div>
`}
css={`
.container {
display: flex;
/* Border */
@@ -39,40 +53,28 @@ html={`
/* Size */
height: 32px;
width: 128px;
">
<!-- Minus button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
/* Size */
width: 32px;
">-</button>
.button {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
<!-- Input container -->
<div style="flex: 1">
<input type="text" style="
/* Take full size of its container */
height: 100%;
width: 100%;
" />
</div>
/* Size */
width: 32px;
}
<!-- Plus button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
.input-container {
flex: 1
}
/* Size */
width: 32px;
">+</button>
</div>
.input {
/* Take full size of its container */
height: 100%;
width: 100%;
}
`}
css={``}
>
<div
style={{

40
client/patterns/switch/Details.tsx
View File

@@ -28,7 +28,15 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<label style="
<label class="label">
<input type="checkbox" class="input" />
<!-- Circle -->
<div class="circle"></div>
</label>
`}
css={`
.label {
display: flex;
/* Rounded border */
@@ -47,26 +55,26 @@ html={`
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;
.input {
/* Hide the input */
display: none;
}
/* Size */
width: 32px;
.circle {
/* Rounded border */
border-radius: 9999px;
background-color: #FFF;
/* Size */
width: 32px;
/* OFF status */
border: 1px solid rgba(0, 0, 0, .3);
" />
</label>
background-color: #FFF;
/* OFF status */
border: 1px solid rgba(0, 0, 0, .3);
}
`}
css={``}
>
<div
style={{

48
client/patterns/tab/Details.tsx
View File

@@ -47,36 +47,42 @@ 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="tabs">
<!-- 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 class="tab--active">
...
</div>
<!-- Inactive tab -->
<div style="
/* Has only the bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
">
<div class="tab--inactive">
...
</div>
</div>
`}
css={``}
css={`
.tabs {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.tab--active {
/* 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;
}
.tab--inactive {
/* Has only the bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
`}
>
<div
style={{

31
client/patterns/toggle-password-visibility/Details.tsx
View File

@@ -23,21 +23,9 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
">
<div class="container">
<!-- Text input -->
<input
type="text"
style="
border-color: transparent;
/* Take available width */
flex: 1;
"
/>
<input type="text" class="input" />
<!-- Toggle button sticks to the right -->
<button>
@@ -45,7 +33,20 @@ html={`
</button>
</div>
`}
css={``}
css={`
.container {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
}
.input {
border-color: transparent;
/* Take available width */
flex: 1;
}
`}
>
<div
style={{

49
client/patterns/upload-button/Details.tsx
View File

@@ -24,7 +24,19 @@ const Details: React.FC<{}> = () => {
</div>
<BrowserFrame
html={`
<div style="
<div class="container">
<!-- The real file input -->
<input type="file" class="input" />
<!-- The upload icon -->
<div class="icon">...</div>
<!-- The label -->
...
</div>
`}
css={`
.container {
/* Used to position the input */
position: relative;
@@ -34,31 +46,24 @@ html={`
/* 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;
"
/>
.input {
/* Take the full size */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
<!-- The upload icon -->
<div style="margin-right: 8px">...</div>
/* Make it transparent */
opacity: 0;
}
<!-- The label -->
...
</div>
.icon {
margin-right: 8px
}
`}
css={``}
>
<div
style={{

104
client/patterns/wizard/Details.tsx
View File

@@ -23,71 +23,75 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
display: flex;
">
<div class="wizard">
<!-- 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;
">
<div class="step">
<div class="step__dot">
<!-- 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;
*/
" />
<div class="step__connector"></div>
<!-- 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 class="step__number">
...
</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 class="step__connector"></div>
</div>
<!-- Title of step -->
...
</div>
<!-- Repeat other steps -->
...
</div>
`}
css={``}
css={`
.wizard {
display: flex;
}
.step {
/* Make all steps have the same width */
flex: 1;
}
.step__dot {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.step__connector {
flex: 1;
height: 1px;
background-color: rgba(0, 0, 0, .3);
}
.step:first-child .step__connector,
.step:last-child .step__connector {
background-color: transparent;
}
.step__number {
/* 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
style={{

BIN
public/assets/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 26 KiB