Martin Brennan
f9603a24ea
Horizon is targeting the welcome banner not the search component anymore, update CSS class names and rename the file to make this clearer
105 lines
2.3 KiB
SCSS
105 lines
2.3 KiB
SCSS
.welcome-banner {
|
|
z-index: calc(z("base") + 1);
|
|
}
|
|
|
|
.welcome-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;
|
|
}
|
|
|
|
@include breakpoint("mobile-extra-large") {
|
|
display: block;
|
|
padding: 0.5em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1 {
|
|
grid-column: 1/2;
|
|
grid-row: 1/-1;
|
|
text-align: left;
|
|
align-self: center;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
color: var(--search-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;
|
|
}
|
|
@include breakpoint("mobile-extra-large") {
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
@include breakpoint("mobile-extra-large") {
|
|
display: none;
|
|
}
|
|
}
|
|
p {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.search-menu .search-input,
|
|
.search-menu-container .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,
|
|
.search-menu .searching .show-advanced-search .d-icon {
|
|
color: var(--search-color);
|
|
}
|
|
.panel-body {
|
|
z-index: z("dropdown");
|
|
}
|
|
.results {
|
|
background: var(--d-content-background);
|
|
}
|