mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-24 03:06:22 +02:00
59 lines
943 B
SCSS
59 lines
943 B
SCSS
.timeline {
|
|
/* Used to position the left vertical line */
|
|
position: relative;
|
|
|
|
/* Demo */
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.timeline__line {
|
|
/* Border */
|
|
border-right: 2px solid #d1d5db;
|
|
|
|
/* Positioned at the left */
|
|
left: 0.75rem;
|
|
position: absolute;
|
|
top: 0px;
|
|
|
|
/* Take full height */
|
|
height: 100%;
|
|
}
|
|
|
|
.timeline__items {
|
|
/* Reset styles */
|
|
list-style-type: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.timeline__item {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timeline__top {
|
|
/* Center the content horizontally */
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.timeline__circle {
|
|
/* Rounded border */
|
|
background-color: #d1d5db;
|
|
border-radius: 9999px;
|
|
|
|
/* Size */
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.timeline__title {
|
|
/* Take available width */
|
|
flex: 1;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.timeline__desc {
|
|
/* Make it align with the title */
|
|
margin-left: 2rem;
|
|
} |