2017-08-31 17:41:17 +03:00
|
|
|
import React from 'react';
|
2017-08-08 13:07:18 +03:00
|
|
|
import is from 'styled-is';
|
|
|
|
import typography from '../typography';
|
|
|
|
import P from '../text/p';
|
|
|
|
|
2017-08-31 17:41:17 +03:00
|
|
|
const Chevron = P.extend`
|
2017-08-08 13:07:18 +03:00
|
|
|
${typography.fontFamily};
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
${is('up')`
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
`};
|
|
|
|
|
|
|
|
${is('down')`
|
|
|
|
transform: rotate(90deg);
|
|
|
|
`};
|
|
|
|
|
|
|
|
${is('left')`
|
|
|
|
transform: rotate(180deg);
|
|
|
|
`};
|
|
|
|
|
|
|
|
&:before {
|
2017-08-28 22:21:08 +03:00
|
|
|
content: '\\003e';
|
2017-08-08 13:07:18 +03:00
|
|
|
}
|
|
|
|
`;
|
2017-08-31 17:41:17 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @example ./usage.md
|
|
|
|
*/
|
|
|
|
export default ({ children, ...rest }) => (
|
|
|
|
<Chevron {...rest}>{children}</Chevron>
|
|
|
|
);
|