import styled from 'react-emotion'; import { Link } from 'react-router-dom'; import { breakpoints } from '../../utils/styles/media'; import Ico from '../Icon'; import Label from '../Label'; import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; import { default as MuiIconButton } from '../../muiComponents/IconButton'; import { default as Photo } from '../../muiComponents/Avatar'; import List from '../../muiComponents/List'; import { default as Typography } from '../../muiComponents/Heading'; import Grid from '../../muiComponents/Grid'; import ListItemText from '../../muiComponents/ListItemText'; export const OverviewItem = styled('span')` && { display: flex; align-items: center; margin: 0 0 0 16px; color: ${colors.greyLight2}; font-size: 12px; @media (max-width: ${breakpoints.medium}px) { &:nth-child(3) { display: none; } } @media (max-width: ${breakpoints.small}px) { &:nth-child(4) { display: none; } } } `; export const Icon = styled(Ico)({ '&&': { margin: '2px 10px 0 0', fill: colors.greyLight2, }, }); export const Published = styled('span')({ '&&': { color: colors.greyLight2, margin: '0 5px 0 0', }, }); export const Text = styled(Label)({ '&&': { fontSize: '12px', fontWeight: fontWeight.semiBold, color: colors.greyLight2, }, }); export const Details = styled('span')({ '&&': { marginLeft: '5px', lineHeight: 1.5, display: 'flex', flexDirection: 'column', }, }); export const Author = styled('div')({ '&&': { display: 'flex', alignItems: 'center', }, }); export const Avatar = styled(Photo)({ '&&': { width: '20px', height: '20px', }, }); export const WrapperLink = styled(Link)({ '&&': { textDecoration: 'none', }, }); export const PackageTitle = styled('span')` && { font-weight: 600; font-size: 20px; display: block; margin-bottom: 12px; color: ${colors.eclipse}; cursor: pointer; &:hover { color: ${colors.black}; } @media (max-width: ${breakpoints.small}px) { font-size: 14px; margin-bottom: 8px; } } `; export const GridRightAligned = styled(Grid)({ '&&': { textAlign: 'right', }, }); export const PackageList = styled(List)({ '&&': { padding: '12px 0 12px 0', '&:hover': { backgroundColor: colors.greyLight3, }, '> :last-child': { paddingTop: 0, }, }, }); export const IconButton = styled(MuiIconButton)({ '&&': { padding: '6px', svg: { fontSize: '16px', }, }, }); export const TagContainer = styled('span')` && { margin-top: 8px; margin-bottom: 12px; display: block; @media (max-width: ${breakpoints.medium}px) { display: none; } } `; export const PackageListItemText = styled(ListItemText)({ '&&': { paddingRight: 0, }, }); export const Description = styled(Typography)({ color: colors.greyDark2, fontSize: '14px', paddingRight: 0, });