Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE introducing the like button feature

Browse Source
This commit is contained in:
Nonimart 2025-09-17 14:20:13 +02:00
parent 0eb39603a9
commit f12528f780
1 changed files with 59 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
resources/css/components/post-header.css
View File

@ -65,7 +65,7 @@
}
.post-details {
@apply flex flex-wrap justify-between gap-28 mt-12;
@apply flex flex-wrap justify-between gap-28 gap-y-8 mt-12;
grid-template-columns: 1fr 1fr;
&__label {
@ -75,8 +75,8 @@
}
.socials-buttons {
@apply flex flex-wrap gap-4 h-fit;
@apply flex flex-wrap justify-end gap-4 h-fit;
min-width: 470px;
&__button {
@apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2;
transition: transform 0.3s ease-in-out;
@ -90,6 +90,62 @@
img {
@apply w-7 h-7 filter-primary;
}
&--like {
transition: all 0.3s ease-in-out;
.button-action-text {
max-width: 0;
overflow: hidden;
white-space: nowrap;
}
.likes-count {
max-width: 200px;
overflow: hidden;
/* transition: max-width 0.3s ease-in-out; */
white-space: nowrap;
}
&[data-likes-count='0'] {
.button-action-text {
max-width: 200px;
}
.likes-count {
max-width: 0;
}
}
&:hover {
.button-action-text {
max-width: 200px;
transition: max-width 0.3s ease-in-out;
}
.likes-count {
max-width: 0;
}
}
&.is-disabled {
@apply opacity-100 cursor-not-allowed hover:opacity-80;
.likes-count {
@apply block;
}
.button-action-text {
@apply max-w-0;
}
}
&.is-disabled:hover {
.button-action-text {
@apply max-w-[200px];
}
.likes-count {
@apply max-w-0;
}
}
}
}
}
}