.dev/assets/shared/css/header/search-modal.scss
/*! Search Modal: */
.search-modal {
background: rgba(0, 0, 0, 0.25);
bottom: 0;
display: none;
left: -9999rem;
opacity: 0;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
position: fixed;
top: 0;
transition: opacity 0.15s linear, left 0s 0.15s linear;
width: 100%;
z-index: 10001;
@media (prefers-reduced-motion: reduce) {
transition: 0;
}
&::-webkit-scrollbar {
display: none !important;
}
&.show-modal {
display: block;
left: 0;
}
&.active {
cursor: pointer;
opacity: 1;
transition: opacity 0.2s linear;
> * {
cursor: default;
}
.search-modal-inner {
box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.08);
transform: translateY(0);
transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear;
}
}
}
.search-modal-inner {
background-color: var(--go-header--color--background, var(--go--color--background));
padding: 3vw;
transform: translateY(-100%);
transition: transform 0.15s linear, box-shadow 0.15s linear;
@include media(medium) {
padding: var(--go-header--padding--y, 3vw) var(--go-block--padding--x);
}
}
.admin-bar .search-modal.active {
top: 32px;
@include media(admin-bar-only) {
top: 46px;
}
}