80 lines
2.1 KiB
CSS
80 lines
2.1 KiB
CSS
.search-module {
|
|
@apply w-full absolute
|
|
bg-white
|
|
left-0
|
|
px-16
|
|
py-6
|
|
z-10
|
|
bottom-0
|
|
overflow-x-hidden
|
|
transform translate-y-full;
|
|
|
|
@apply block;
|
|
/* transition: all 0.5s;
|
|
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
|
|
|
|
&[mobile-closed] {
|
|
@apply hidden;
|
|
}
|
|
|
|
&[mobile-closing] {
|
|
/* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
|
fade-out 800ms forwards ease-in; */
|
|
animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
|
|
}
|
|
&[mobile-opened] {
|
|
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
|
fade-in 600ms forwards ease-out;
|
|
}
|
|
|
|
&__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 {
|
|
box-sizing: border-box;
|
|
@apply block max-w-full w-full flex-grow !py-4 !border-neutral-500 px-4 focus-visible:ring-primary focus-visible:ring-2;
|
|
@apply border rounded-full md:rounded-r-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-secondary 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;
|
|
}
|
|
&__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;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
}
|
|
}
|