nav bar spacings fixed for all possible cases

This commit is contained in:
NikolaBorislavovHristov 2019-05-10 12:29:27 +03:00
parent c9a2d71445
commit 3fd5c4a746
2 changed files with 16 additions and 4 deletions

View file

@ -38,10 +38,13 @@ const NavBar = React.memo(({ backButton, tabs, title, searchBar, userMenu }) =>
:
<h2 className={styles['title']}>{title}</h2>
}
<div className={styles['spacing']} />
{
searchBar ?
<SearchBar className={styles['search-bar']} />
<React.Fragment>
<div className={styles['spacing']} />
<SearchBar className={styles['search-bar']} />
<div className={styles['spacing']} />
</React.Fragment>
:
null
}

View file

@ -50,6 +50,10 @@
font-style: normal;
font-weight: normal;
color: var(--color-surfacelighter);
&~.spacing {
display: none;
}
}
.spacing {
@ -57,9 +61,14 @@
}
.search-bar {
width: calc(var(--nav-bar-height) * 9);
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(var(--nav-bar-height) * 8);
height: var(--nav-bar-height);
margin-right: calc(var(--nav-bar-height) * 3.5);
&+.spacing {
max-width: calc(var(--nav-bar-height) * 3.5);
}
}
.user-menu {