UX: adjust styles to meet core changes (#148)

This commit is contained in:
Jordan Vidrine
2025-04-23 14:44:00 -05:00
committed by GitHub
parent 70af5fc68a
commit 806b800f1f
+50 -53
View File
@@ -1,8 +1,5 @@
.welcome-banner { .welcome-banner {
z-index: calc(z("base") + 1); &__wrap {
}
.welcome-banner__wrap {
display: grid; display: grid;
grid-template-rows: 0.33fr 0.33fr 0.33fr; grid-template-rows: 0.33fr 0.33fr 0.33fr;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -22,7 +19,55 @@
margin-top: 0; margin-top: 0;
} }
h1 { .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);
}
&__title {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/-1; grid-row: 1/-1;
text-align: left; text-align: left;
@@ -53,52 +98,4 @@
font-size: var(--font-up-2); 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);
} }