Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

STYLE add new CSS for member author card component with hover effects and profile picture placeholders

Browse Source
This commit is contained in:
Antoine M 2025-11-25 15:13:08 +01:00
parent 21d354b964
commit 706927d681
1 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
resources/css/components/member-author-card.css Normal file
View File

@ -0,0 +1,74 @@
.author-card {
@apply grid w-full border border-primary p-6 mb-12 items-center;
grid-template-columns: min-content 1fr;
gap: 1rem;
transition: all 0.3s ease-in-out;
&:hover {
@apply translate-y-[-4px];
}
&__profile-picture {
@apply w-32 h-32 object-cover p-2 border border-primary;
img {
@apply w-full h-full object-cover;
filter: grayscale(100%);
}
&-placeholder {
@apply bg-carhop-green-100 flex items-center justify-center;
&:before {
content: '';
@apply block w-6 h-6 filter-primary;
background-image: url('../resources/img/icons/icon-losange.svg');
background-size: contain;
background-repeat: no-repeat !important;
background-position: center;
}
&--1n:before {
background-image: url('../resources/img/icons/icon-losange.svg');
}
&--2n:before {
background-image: url('../resources/img/icons/icon-rectangle-rotated.svg');
}
&--3n:before {
background-image: url('../resources/img/icons/icon-circle.svg');
}
&--4n:before {
background-image: url('../resources/img/icons/icon-rectangle-vertical.svg');
}
}
&-placeholder {
@apply w-full h-full bg-carhop-green-100 relative;
/* &:after {
@apply content-[''] block w-6 h-6 bg-carhop-green-700 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
} */
}
}
&__infos {
@apply w-full flex flex-col gap-y-2;
.author-card__name {
@apply text-2xl uppercase font-medium tracking-normal;
}
.author-card__articles-amount {
@apply text-primary font-normal flex items-center gap-2;
&::before {
content: '';
@apply block w-6 h-6 bg-no-repeat bg-center;
background-image: url('../resources/img/icons/icon-activites.svg');
background-size: contain;
}
}
}
&__description {
@apply col-span-2;
}
}