navbar: Set search-container width in CSS vars.

This commit is contained in:
Karl Stolley 2023-09-27 12:23:05 -05:00 committed by Tim Abbott
parent 724e76ee80
commit ad588e7441
2 changed files with 6 additions and 7 deletions

View File

@ -69,7 +69,7 @@
}
#searchbox-input-container {
width: 150px;
width: var(--search-box-width);
}
.search-input {
@ -95,12 +95,6 @@
}
@media (width < $md_min) {
#searchbox-input-container {
/* On small screens, the input container/button becomes just
an icon. Width is to match the width of nearby buttons. */
width: 40px;
}
.search-input {
opacity: 0;
}

View File

@ -63,11 +63,16 @@ body {
the height of its parent (i.e. the header height).
*/
--search-box-height: 28px;
--search-box-width: 150px;
@media (width < $sm_min) {
--search-box-height: var(--header-height);
}
@media (width < $md_min) {
--search-box-width: 40px;
}
/*
Since #navbar_alerts_wrapper can take variable height depending upon
window width / language, we sync its height in navbar_alerts.js