Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding 5 o'clock shadow to org navigation

Browse Source
This commit is contained in:
Tom Gallacher 2017-01-19 15:08:08 +00:00
parent 87e3e38510
commit b735cd2ee2
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/navigation/org.js
View File

@ -42,6 +42,7 @@ const StyledNav = styled.div`
// TODO: refactor colours into constants in UI // TODO: refactor colours into constants in UI
const NavigationLinkContainer = styled.div` const NavigationLinkContainer = styled.div`
position: relative;
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
color: #646464; color: #646464;
border: solid ${remcalc(1)} #d8d8d8; border: solid ${remcalc(1)} #d8d8d8;
@ -77,6 +78,17 @@ const NavLi = styled.li`
} }
`; `;
const Shadow = styled.div`
z-index: 1;
position: absolute;
height: ${remcalc(5)};
width: 100%;
left: 0;
bottom: 0;
background-image:
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
`;
const OrgNavigation = ({ const OrgNavigation = ({
orgs = [] orgs = []
}) => { }) => {
@ -98,6 +110,7 @@ const OrgNavigation = ({
}) => }) =>
<a href={href} onClick={onClick}> <a href={href} onClick={onClick}>
<NavigationLinkContainer className={isActive ? 'active' : ''}> <NavigationLinkContainer className={isActive ? 'active' : ''}>
{ !isActive && <Shadow />}
<OrgImage> <OrgImage>
<OrgAvatar <OrgAvatar
height={remcalc(26)} height={remcalc(26)}