Jordan Vidrine
dfa22d21b6
This PR preps the Horizon theme for the merger of the search banner into core. This PR should only be merged once this PR in core has been merged.
97 lines
2.2 KiB
SCSS
97 lines
2.2 KiB
SCSS
.floating-search-input-wrapper {
|
|
grid-area: extra-info;
|
|
}
|
|
|
|
.header-search--enabled .floating-search-input-wrapper,
|
|
.search-header--visible .floating-search-input-wrapper {
|
|
justify-content: end;
|
|
}
|
|
|
|
.header-search--enabled .floating-search-input,
|
|
.search-header--visible .floating-search-input {
|
|
width: 70%;
|
|
}
|
|
|
|
.custom-search-banner-wrap {
|
|
display: grid;
|
|
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: 1em;
|
|
grid-row-gap: 0.5em;
|
|
border-bottom: 1px solid var(--primary-300);
|
|
padding: 1.5em 0 2.5em;
|
|
margin-bottom: 0;
|
|
@media screen and (max-width: 768px) {
|
|
padding: 1em;
|
|
}
|
|
h1 {
|
|
grid-column: 1/2;
|
|
grid-row: 1/-1;
|
|
text-align: left;
|
|
align-self: center;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
color: var(--search-banner-text-color);
|
|
@media screen and (max-width: 1028px) {
|
|
font-size: var(--font-up-4);
|
|
grid-column: 1/-1;
|
|
grid-row: 1;
|
|
text-align: center;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
text-align: left;
|
|
grid-column: 1/2;
|
|
grid-row: 1/-1;
|
|
font-size: var(--font-up-3);
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
grid-column: 1/-1;
|
|
grid-row: 1;
|
|
text-align: center;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
.search-menu {
|
|
grid-column: 2/3;
|
|
grid-row: 1/-1;
|
|
width: 100%;
|
|
align-self: center;
|
|
@media screen and (max-width: 1028px) {
|
|
grid-row: 2/-1;
|
|
grid-column: 1/-1;
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
grid-column: 2/-1;
|
|
grid-row: 1/-1;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
grid-row: 2/-1;
|
|
grid-column: 1/-1;
|
|
}
|
|
}
|
|
p {
|
|
display: none;
|
|
}
|
|
.search-input {
|
|
background: var(--d-content-background);
|
|
border: 1px solid var(--search-color);
|
|
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
|
}
|
|
.search-menu .search-input:focus-within,
|
|
.search-menu-container .search-input:focus-within {
|
|
border: 1px solid var(--search-color);
|
|
outline: 2px solid var(--search-color);
|
|
}
|
|
.search-menu .d-icon,
|
|
.search-menu .searching .d-icon {
|
|
color: var(--search-color);
|
|
}
|
|
.panel-body {
|
|
z-index: z("dropdown");
|
|
}
|
|
.results {
|
|
background: var(--d-content-background);
|
|
}
|
|
}
|