66 lines
1.5 KiB
CSS
66 lines
1.5 KiB
CSS
.search-module {
|
|
@apply w-full absolute
|
|
bg-white
|
|
left-0
|
|
bottom-0
|
|
px-16
|
|
py-6
|
|
transform translate-y-full;
|
|
|
|
&__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-gray-dark border-none opacity-50 w-full;
|
|
height: 1px;
|
|
}
|
|
&__input {
|
|
@apply block max-w-full flex-grow py-3 border border-black rounded-tl-3xl rounded-bl-3xl px-4;
|
|
}
|
|
button[type='submit'] {
|
|
@apply bg-secondary text-white w-1/6 flex justify-center items-center gap-3 rounded-tr-3xl rounded-br-3xl px-4 py-3;
|
|
max-width: 300px;
|
|
.search_icon {
|
|
@apply invert;
|
|
}
|
|
}
|
|
}
|
|
&__suggestions {
|
|
@apply flex flex-wrap gap-x-3 pt-4;
|
|
&__navlist {
|
|
@apply flex flex-wrap gap-x-3;
|
|
|
|
.suggestion-item {
|
|
@apply font-bold underline underline-offset-4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-module {
|
|
@apply block;
|
|
transition: all 0.5s;
|
|
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
|
|
}
|
|
.search-module[aria-hidden='true'] {
|
|
@apply hidden;
|
|
}
|
|
|
|
.search-module-closed {
|
|
/* transition: all 0.3s ease-in-out; */
|
|
@apply transform translate-y-1/2 opacity-0 pointer-events-none;
|
|
z-index: -1;
|
|
}
|
|
.search-module-open {
|
|
/* transition: all 0.3s ease-in-out; */
|
|
|
|
@apply transform translate-y-full;
|
|
z-index: 20;
|
|
}
|