Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/search.css
View File

@ -69,7 +69,7 @@
} }
#searchbox-input-container { #searchbox-input-container {
width: 150px; width: var(--search-box-width);
} }
.search-input { .search-input {
@ -95,12 +95,6 @@
} }
@media (width < $md_min) { @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 { .search-input {
opacity: 0; opacity: 0;
} }

5
web/styles/zulip.css
View File

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