Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-05 23:19:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

VerticalNavBar styled

Browse source
This commit is contained in:
nklhrstv 2020-02-18 22:25:10 +02:00
parent c011b46d73
commit 43a506e73a
4 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App/styles.less
View file

@ -11,6 +11,7 @@
--poster-shape-ratio: 1.464;
--scroll-bar-width: 6px;
--nav-bar-size: 3.2rem;
--vertical-nav-bar-size: 5rem;
--focus-outline-size: 2px;
--color-facebook: #4267b2;
--color-twitter: #1DA1F2;

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

@ -27,6 +27,8 @@
&.nav-tab-button-vertical {
flex-direction: column;
justify-content: center;
width: var(--vertical-nav-bar-size);
height: var(--vertical-nav-bar-size);
padding: 0.5rem;
.icon {
@ -36,7 +38,7 @@
.label {
flex: none;
max-height: 1.2em;
font-size: 0.75rem;
font-size: 0.85rem;
}
}

4
src/common/NavBar/VerticalNavBar/VerticalNavBar.js
View file

@ -1,12 +1,12 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const NavTabButton = require('stremio/common/NavBar/NavTabButton');
const NavTabButton = require('../NavTabButton');
const styles = require('./styles');
const VerticalNavBar = React.memo(({ className, route, tabs }) => {
return (
<nav className={classnames(className, styles['nav-bar-container'])}>
<nav className={classnames(className, styles['vertical-nav-bar-container'])}>
{
Array.isArray(tabs) && tabs.length > 0 ?
tabs.map((tab, index) => (

5
src/common/NavBar/VerticalNavBar/styles.less
View file

@ -1,6 +1,5 @@
.nav-bar-container {
--nav-bar-size: 4.4rem;
width: var(--nav-bar-size);
.vertical-nav-bar-container {
width: var(--vertical-nav-bar-size);
padding: 1rem 0;
background-color: var(--color-backgroundlighter);
overflow-y: auto;