FEATURE Handling reset button behaviour

This commit is contained in:
Antoine M 2026-04-08 16:36:21 +02:00
parent 8cd9e60ec0
commit 25865b08bf

View File

@ -22,18 +22,36 @@
&:after { &:after {
@apply absolute top-1/2 -translate-y-1/2; @apply absolute top-1/2 -translate-y-1/2;
content: ''; content: '';
right: 10px; right: 14px;
display: flex; display: flex;
width: 30px; width: 36px;
height: 30px; height: 36px;
background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg'); background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: contain; background-size: contain;
} }
/* Masquer la loupe si le champ n'est pas vide */
&:has(input:not(:placeholder-shown))::after {
display: none;
}
input:not(:placeholder-shown) ~ #reset-search {
display: flex;
}
#reset-search {
@apply absolute top-1/2 -translate-y-1/2;
right: 14px;
display: none;
width: 36px;
height: 36px;
}
input { input {
@apply w-full !py-4 px-4 border border-primary rounded-full text-base; @apply w-full !py-4 px-5 border border-primary rounded-full text-base;
padding-right: 33px; padding-right: 36px;
line-height: 1.5; line-height: 1.5;
height: auto; height: auto;