Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-30 10:49:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

NavBarButton focus implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-04-25 13:21:56 +03:00
parent f56bedb351
commit badcf77c4c
2 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/NavBar/NavBarButton/NavBarButton.js
View file

@ -18,7 +18,7 @@ const NavBarButton = React.memo(({ className, icon, label, href, onClick }) => {
}, [href, locationHash]);
const inputType = typeof onClick === 'function' ? 'button' : 'link';
return (
<Input className={classnames(className, styles['button'], { 'active': active })} type={inputType} href={href} onClick={onClick}>
<Input className={classnames(className, styles['button'], 'focusable-with-border', { 'active': active })} type={inputType} href={href} onClick={onClick}>
<Icon className={styles['icon']} icon={icon} />
<div className={styles['label']}>{label}</div>
</Input>

7
src/common/NavBar/NavBarButton/styles.less
View file

@ -2,11 +2,11 @@
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 0 1.4em;
padding: 0 1.2em;
overflow: hidden;
cursor: pointer;
&:hover, &:focus {
&:hover {
background-color: var(--color-backgrounddark20);
}
@ -24,8 +24,9 @@
flex: 1;
height: 1.4em;
line-height: 1.4em;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: capitalize;
color: var(--color-surfacelighter);
}