mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
Adding 5 o'clock shadow to org navigation
This commit is contained in:
parent
87e3e38510
commit
b735cd2ee2
@ -42,6 +42,7 @@ const StyledNav = styled.div`
|
||||
|
||||
// TODO: refactor colours into constants in UI
|
||||
const NavigationLinkContainer = styled.div`
|
||||
position: relative;
|
||||
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
|
||||
color: #646464;
|
||||
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 = ({
|
||||
orgs = []
|
||||
}) => {
|
||||
@ -98,6 +110,7 @@ const OrgNavigation = ({
|
||||
}) =>
|
||||
<a href={href} onClick={onClick}>
|
||||
<NavigationLinkContainer className={isActive ? 'active' : ''}>
|
||||
{ !isActive && <Shadow />}
|
||||
<OrgImage>
|
||||
<OrgAvatar
|
||||
height={remcalc(26)}
|
||||
|
Loading…
Reference in New Issue
Block a user