129 lines
3.0 KiB
CSS
129 lines
3.0 KiB
CSS
.search-module {
|
|
@apply w-full absolute
|
|
bg-carhop-green-700
|
|
/* bg-white */
|
|
text-white
|
|
left-0
|
|
px-16
|
|
py-6
|
|
z-10
|
|
bottom-0
|
|
/* overflow-x-hidden */
|
|
transform translate-y-full;
|
|
@apply block overflow-x-hidden;
|
|
|
|
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
|
fade-in 600ms forwards ease-out;
|
|
|
|
@keyframes translate-in {
|
|
from {
|
|
transform: translateY(calc(100% - 100px));
|
|
}
|
|
to {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes translate-out {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
transform: translateY(calc(100% - 100px));
|
|
}
|
|
}
|
|
|
|
&[closed] {
|
|
@apply hidden;
|
|
}
|
|
|
|
&[closing] {
|
|
animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
|
|
}
|
|
|
|
&[opened] {
|
|
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
|
fade-in 600ms forwards ease-out;
|
|
}
|
|
|
|
a {
|
|
@apply text-white;
|
|
}
|
|
input::placeholder {
|
|
@apply !text-white;
|
|
}
|
|
&__wrapper-container {
|
|
@apply max-w-screen-xl mx-auto;
|
|
}
|
|
&__search-form {
|
|
@apply flex flex-wrap;
|
|
|
|
&__title {
|
|
@apply block font-bold text-lg w-full;
|
|
}
|
|
&__separator {
|
|
@apply mt-2 mb-8 bg-neutral-500 border-none opacity-50 w-full;
|
|
height: 1px;
|
|
}
|
|
|
|
&__input {
|
|
box-sizing: border-box;
|
|
@apply block max-w-full w-full flex-grow !py-4 !border-white px-4 !pl-12 focus-visible:ring-primary focus-visible:ring-2;
|
|
@apply border rounded-none;
|
|
outline: none !important;
|
|
/* border-right: none;
|
|
border-top-left-radius: 999px;
|
|
border-bottom-left-radius: 999px;
|
|
border: 1px solid; */
|
|
|
|
/* box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; */
|
|
}
|
|
button[type='submit'] {
|
|
@apply bg-primary hidden text-white shrink-0 flex justify-center items-center gap-3 rounded-full md:rounded-l-none px-4 py-3 focus-visible:ring-primary focus-visible:ring-2;
|
|
max-width: 300px;
|
|
outline: none !important;
|
|
transform: translateX(-1px);
|
|
.search_icon {
|
|
@apply invert;
|
|
}
|
|
}
|
|
}
|
|
&__searchbar-group {
|
|
@apply w-full flex flex-col md:flex-row gap-y-4 relative;
|
|
&:before {
|
|
@apply content-[''] absolute inset-0 bg-contain bg-center bg-no-repeat w-6 h-6 left-4 top-1/2 -translate-y-1/2;
|
|
background-image: url('../resources/img/icons/carhop-rechercher.svg');
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
&__suggestions {
|
|
@apply pt-4;
|
|
.suggestion-item {
|
|
@apply underline underline-offset-4 block w-full mb-2 font-light text-base;
|
|
word-break: break-word;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
body:has(.search-module[opened]) main {
|
|
filter: blur(2px) brightness(0.8);
|
|
}
|