florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Begin migrate to leptos

Browse source
This commit is contained in:
Florian RICHER 2023-10-08 20:26:40 +02:00
parent 1060e12513
commit 79daad993e
45 changed files with 3202 additions and 1975 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src_old/components/timeline/TimelineElement.scss Normal file
View file

@ -0,0 +1,83 @@
.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 -ml-2 z-50;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
}
&: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;
@apply text-on_surface dark:text-dark_on_surface;
}
.timeline-element__category {
@apply top-5 flex md:justify-end mb-12;
}
.timeline-element__info {
& > details {
@apply mb-12 rounded-xl overflow-hidden relative;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
& > summary, & > div {
@apply p-5;
}
& > summary {
@apply relative block select-none cursor-pointer outline-none p-5 pr-10 font-semibold;
&:hover {
@apply bg-primary/20 dark:bg-dark_primary/20;
}
i {
@apply absolute right-5 h-full top-0 flex items-center;
& > svg {
@apply scale-125;
transition: transform 300ms ease;
}
}
}
&[open] {
& > summary {
& > i > svg {
@apply -rotate-180;
}
& ~ * {
animation: toggle 0.4s ease-in-out;
}
}
}
}
}
}
@keyframes toggle {
0% {
font-size: 0;
opacity: 0;
}
90% {
font-size: 1rem;
opacity: 0;
}
100% {
font-size: 1rem;
opacity: 1;
}
}