52 lines
1.5 KiB
SCSS
52 lines
1.5 KiB
SCSS
|
.timeline {
|
||
|
|
@apply w-full max-w-5xl flex justify-center;
|
||
|
|
|
||
|
|
& > ul {
|
||
|
|
@apply list-none py-5 px-0 relative w-full;
|
||
|
|
|
||
|
|
& > li {
|
||
|
|
@apply mb-12 relative flex;
|
||
|
|
|
||
|
|
& > details {
|
||
|
|
@apply w-2/5 rounded-xl overflow-hidden relative bg-[#f5f5f5];
|
||
|
|
box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
|
||
|
|
|
||
|
|
& > summary {
|
||
|
|
@apply block select-none cursor-pointer outline-none p-5 mb-0 font-semibold;
|
||
|
|
transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@apply bg-[#f8f8f8];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > p {
|
||
|
|
@apply py-5 pl-0 pr-2;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[open] {
|
||
|
|
& > summary {
|
||
|
|
@apply mb-5 pb-5;
|
||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Place point in center line
|
||
|
|
&:before {
|
||
|
|
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-1/2 bg-[#f8f8f8] -ml-2 z-50;
|
||
|
|
box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(even) {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Draw center line
|
||
|
|
&:before {
|
||
|
|
@apply top-0 bottom-0 left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
|
||
|
|
box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|