Skip to content

Instantly share code, notes, and snippets.

@Saifadin
Created December 17, 2018 09:53
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Saifadin/2b9d14678c598eb0a7cebdcf336ce1e2 to your computer and use it in GitHub Desktop.
Why we use CSS-in-JS 3
import styled from 'react-emotion';
import { NavLink } from 'react-router-dom';
import { Icon } from '@homelike/ui-kit';
export const Header = styled('header')`
display: grid;
grid-template-columns: 24px 1fr 24px;
align-items: center;
padding: 0 ${({ theme: { spacing } }) => spacing * 2}px;
`;
export const Logo = styled(Icon)`
display: block;
`;
export const Spacer = styled('div')`
display: block;
`;
export const Menu = styled('div')`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
`;
export const MenuItem = styled(NavLink)`
margin: 0 ${({ theme: { spacing } }) => spacing}px;
height: 72px;
line-height: 68px;
font-size: ${({ theme: { fontSizeMedium } }) => fontSizeMedium};
padding-top: ${({ theme: { spacing } }) => spacing * 0.25}px;
color: ${({ theme: { gray4 } }) => gray4};
text-decoration: none;
white-space: nowrap;
cursor: pointer;
&.isActive,
&:hover {
border-top: 4px solid ${({ theme: { primary } }) => primary};
padding-top: 0;
text-decoration: none;
color: ${({ theme: { gray1 } }) => gray1};
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment