51 lines
1.4 KiB
SCSS
51 lines
1.4 KiB
SCSS
|
.timeline-element {
|
||
|
|
@apply relative flex flex-col md:flex-row justify-between;
|
||
|
|
|
||
|
|
// Place point in center line
|
||
|
|
&:before {
|
||
|
|
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
|
||
|
|
box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(even) {
|
||
|
|
@apply md:flex-row-reverse;
|
||
|
|
|
||
|
|
.timeline-element__category {
|
||
|
|
@apply md:flex-row-reverse;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-element__info, .timeline-element__category {
|
||
|
|
@apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-element__category {
|
||
|
|
@apply top-5 flex md:justify-end mb-12;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-element__info {
|
||
|
|
& > details {
|
||
|
|
@apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
|
||
|
|
box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
|
||
|
|
|
||
|
|
& > summary, & > div {
|
||
|
|
@apply p-5;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > summary {
|
||
|
|
@apply block select-none cursor-pointer outline-none mb-0 font-semibold;
|
||
|
|
transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@apply bg-[#f8f8f8];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&[open] {
|
||
|
|
& > summary {
|
||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|