paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 22:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Use variables for changed header height in smaller widths.

Browse Source 
In addition to the benefit of using variables, this change makes
it more noticeable that the header has a different height on smaller
widths.
This commit is contained in:
Aman Agrawal
2022-12-19 07:23:42 +00:00
committed by Tim Abbott
parent b7ea924876
commit 00be770d38
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/styles/zulip.css
View File

@@ -2,6 +2,7 @@
This is the header, aka the navbar. This is the header, aka the navbar.
*/ */
$header_height: 40px; $header_height: 40px;
$header_height_sm: 30px;
/* /*
We have a 10px gutter below the header, We have a 10px gutter below the header,
@@ -17,6 +18,7 @@ with them such as floating recipient bars)
go beneath the header. go beneath the header.
*/ */
$sidebar_top: calc($header_height + $header_padding_bottom); $sidebar_top: calc($header_height + $header_padding_bottom);
$sidebar_top_sm: calc($header_height_sm + $header_padding_bottom);
$left_sidebar_collapse_widget_gutter: 10px; $left_sidebar_collapse_widget_gutter: 10px;
$left_sidebar_width: 270px; $left_sidebar_width: 270px;
@@ -2964,21 +2966,21 @@ select.invite-as {
#searchbox, #searchbox,
#searchbox_legacy, #searchbox_legacy,
.header { .header {
line-height: 30px; line-height: $header_height_sm;
height: 30px; height: $header_height_sm;
} }
.spectator_narrow_login_button { .spectator_narrow_login_button {
height: 30px !important; height: $header_height_sm !important;
} }
#search_query { #search_query {
height: 30px !important; height: $header_height_sm !important;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
#streamlist-toggle-button { #streamlist-toggle-button {
height: 30px; height: $header_height_sm;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
@@ -3001,7 +3003,7 @@ select.invite-as {
} }
#message_view_header_underpadding { #message_view_header_underpadding {
top: 30px; top: $header_height_sm;
height: 10px; height: 10px;
} }
@@ -3016,7 +3018,7 @@ select.invite-as {
} }
#floating_recipient_bar { #floating_recipient_bar {
top: 40px; top: $sidebar_top_sm;
} }
.message_content { .message_content {