NavTabButton styles updated

This commit is contained in:
nklhrstv 2020-02-18 21:14:20 +02:00
parent c2ec423b42
commit 09d52ceecb
2 changed files with 7 additions and 8 deletions

View file

@ -7,7 +7,7 @@ const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, selected, direction, onClick }) => {
return (
<Button className={classnames(className, styles['nav-tab-button-container'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
<Button className={classnames(className, styles['nav-tab-button-container'], styles['nav-tab-button-horizontal'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />

View file

@ -14,7 +14,12 @@
flex-direction: row;
padding: 0 1rem;
.icon {
margin: 0 0.5rem 0 0;
}
.label {
flex: 1;
max-height: 2.4em;
}
}
@ -22,7 +27,6 @@
&.nav-tab-button-vertical {
flex-direction: column;
justify-content: center;
height: var(--nav-bar-size);
padding: 0.5rem;
.icon {
@ -30,6 +34,7 @@
}
.label {
flex: none;
max-height: 1.2em;
font-size: 0.75rem;
}
@ -39,16 +44,10 @@
flex: none;
width: 1.5rem;
height: 1.2rem;
margin-right: 0.5rem;
fill: var(--color-surfacelighter);
&:only-child {
margin-right: 0;
}
}
.label {
flex: 1;
color: var(--color-surfacelighter);
}
}