Jarek Radosz
118 lines
2.4 KiB
SCSS
118 lines
2.4 KiB
SCSS
@use "lib/viewport";
|
|
|
|
.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 (width <= 768px) {
|
|
padding: 1em;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
display: block;
|
|
padding: 0.5em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.search-menu {
|
|
grid-column: 2/3;
|
|
grid-row: 1/-1;
|
|
width: 100%;
|
|
align-self: center;
|
|
|
|
@media screen and (width <= 1028px) {
|
|
grid-row: 2/-1;
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
@media screen and (width <= 768px) {
|
|
grid-column: 2/-1;
|
|
grid-row: 1/-1;
|
|
}
|
|
|
|
@media screen and (width <= 600px) {
|
|
grid-row: 2/-1;
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
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 rgb(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);
|
|
}
|
|
|
|
&__title {
|
|
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 (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 (width <= 768px) {
|
|
text-align: left;
|
|
grid-column: 1/2;
|
|
grid-row: 1/-1;
|
|
font-size: var(--font-up-3);
|
|
}
|
|
|
|
@media screen and (width <= 600px) {
|
|
grid-column: 1/-1;
|
|
grid-row: 1;
|
|
text-align: center;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
}
|