Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 17:02:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

drop nav-bar-height css var

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-18 22:51:22 +03:00
parent 641335f752
commit bab7b9a239
3 changed files with 15 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/NavBar/NavBar.js
View file

@ -15,9 +15,9 @@ const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '
{
backButton ?
<NavBarButton
className={styles['back-button']}
className={styles['nav-bar-button']}
icon={'ic_back_ios'}
label={'back'}
label={'Back'}
onClick={onBackButtonClick}
/>
:
@ -28,7 +28,7 @@ const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '
tabs.slice(0, 4).map(({ href, icon, label }) => (
<NavBarButton
key={href}
className={styles['nav-tab-button']}
className={styles['nav-bar-button']}
href={href}
icon={icon}
label={label}

4
src/common/NavBar/SearchBar/styles.less
View file

@ -45,8 +45,8 @@
flex-direction: row;
justify-content: center;
align-items: center;
width: var(--nav-bar-height);
height: var(--nav-bar-height);
width: 3.2rem;
height: 3.2rem;
background-color: var(--color-secondarylight60);
cursor: pointer;

37
src/common/NavBar/styles.less
View file

@ -1,31 +1,14 @@
.nav-bar-container {
--nav-bar-height: 3.2rem;
display: flex;
flex-direction: row;
align-items: center;
height: var(--nav-bar-height);
height: 3.2rem;
background-color: var(--color-secondarydark);
.back-button {
.nav-bar-button {
flex: none;
max-width: calc(var(--nav-bar-height) * 5);
height: var(--nav-bar-height);
}
.nav-tabs-container {
flex: none;
display: flex;
flex-direction: row;
.nav-tab-button {
flex: none;
max-width: calc(var(--nav-bar-height) * 3.5);
height: var(--nav-bar-height);
&:nth-child(n+5) {
display: none;
}
}
max-width: 11rem;
height: 3.2rem;
}
.title {
@ -50,18 +33,18 @@
.search-bar {
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(var(--nav-bar-height) * 8);
min-width: calc(var(--nav-bar-height) * 3);
height: var(--nav-bar-height);
flex-basis: 25.5rem;
min-width: 9.5rem;
height: 3.2rem;
&+.spacing {
max-width: calc(var(--nav-bar-height) * 3.5);
max-width: 11rem;
}
}
.nav-menu {
flex: none;
width: var(--nav-bar-height);
height: var(--nav-bar-height);
width: 3.2rem;
height: 3.2rem;
}
}