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

css: Use vars for header-size related values. 

The header is 40px tall, with a 10px gutter
below it, which means the top of our sidebars
are 50px from the top of the viewport.

Now all the places that share these values
use `$header_right` and related values.

This is pretty easy to test out by just doubling
or tripling the two numbers at the top of the
file.

The section for `@media (max-width: 500px)` seems
to have its own smaller values for things like
the `height` of `.header`, so I left it alone.
This commit is contained in:
Steve Howell 2020-05-27 20:21:32 +00:00 committed by Tim Abbott
parent fefcaad027
commit add641d0c9
1 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
static/styles/zulip.scss
View File

@ -1,3 +1,23 @@
/*
This is the header, aka the navbar.
*/
$header_height: 40px;
/*
We have a 10px gutter below the header,
which often needs to be respected by both
the elements above it and below it on
the y-axis, due to absolute positioning.
*/
$header_padding_bottom: 10px;
/*
Our sidebars (and anything that top-align
with them such as floating recipient bars)
go beneath the header.
*/
$sidebar_top: calc($header_height + $header_padding_bottom);
body,
html {
width: 100%;
@ -210,8 +230,8 @@ p.n-margin {
position: fixed;
z-index: 102; /* Needs to be higher than .alert-bar-container */
width: 100%;
height: 40px;
padding-bottom: 10px;
height: $header_height;
padding-bottom: $header_padding_bottom;
background-color: inherit;
}
@ -322,7 +342,7 @@ p.n-margin {
.column-left .left-sidebar,
.column-right .right-sidebar {
position: fixed;
margin-top: 50px;
margin-top: $sidebar_top;
z-index: 100;
}
@ -1440,14 +1460,14 @@ div.focused_table {
text-overflow: ellipsis;
float: left;
letter-spacing: normal;
height: 40px;
height: $header_height;
#tab_list {
display: flex;
align-content: flex-start;
flex-wrap: nowrap;
margin: 0px 0px 0px 0px;
height: 40px;
line-height: 40px;
height: $header_height;
line-height: $header_height;
font-size: 16px;
border: none;
white-space: nowrap;
@ -1598,7 +1618,7 @@ div.focused_table {
#searchbox,
#searchbox_legacy {
width: 100%;
height: 40px;
height: $header_height;
.navbar-search:not(.expanded) {
display: none;
@ -1637,7 +1657,7 @@ div.focused_table {
#search_query {
width: 100%;
font-size: 16px;
height: 40px;
height: $header_height;
padding: 0px;
padding-left: 5px;
padding-right: 20px;
@ -1645,7 +1665,7 @@ div.focused_table {
border-radius: 0px;
font-family: 'Source Sans Pro';
font-weight: 300;
line-height: 40px;
line-height: $header_height;
}
#search_arrows:focus {
@ -1726,8 +1746,8 @@ div.focused_table {
#tab_bar_underpadding {
position: absolute;
width: 100%;
top: 40px;
height: 10px;
top: $header_height;
height: $header_padding_bottom;
z-index: 99;
}
@ -1927,7 +1947,7 @@ div.floating_recipient {
}
#floating_recipient_bar {
top: 50px;
top: $sidebar_top;
}
#bottom_whitespace {
@ -2476,8 +2496,16 @@ select.inline_select_topic_edit {
background-color: hsla(0, 0%, 100%, 1.0);
box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1);
border-left: 1px solid hsl(0, 0%, 87%);
margin-top: 40px;
padding: 10px 15px 0px 15px;
// We use both margin and padding to
// hide little artifacts from showing up in
// the gutter below the navbar.
margin-top: $header_height;
padding-top: $header_padding_bottom;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 15px;
height: 100%;
right: 0px;
}
@ -2548,8 +2576,13 @@ select.inline_select_topic_edit {
background-color: hsla(0, 0%, 100%, 1.0);
box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1);
border-right: 1px solid hsl(0, 0%, 87%);
margin-top: 40px;
padding-top: 10px;
// We use both margin and padding to
// hide little artifacts from showing up in
// the gutter below the navbar.
margin-top: $header_height;
padding-top: $header_padding_bottom;
height: 100%;
padding-left: 10px;
width: 250px;