mirror of https://github.com/zulip/zulip.git
navbar: Set search-container width in CSS vars.
This commit is contained in:
parent
724e76ee80
commit
ad588e7441
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue