1 | import _Divider from 'reakit/Divider';
|
2 | import { theme } from 'styled-tools';
|
3 |
|
4 | import styled, { css } from '../styled';
|
5 | import { DividerProps } from './Divider';
|
6 |
|
7 | export const contentProperties = css`
|
8 | display: flex;
|
9 | align-items: center;
|
10 | justify-content: center;
|
11 |
|
12 | &::before {
|
13 | background: white;
|
14 | color: #c3c3c3;
|
15 | content: '${(props: any) => props.content}';
|
16 | text-transform: uppercase;
|
17 | font-size: 0.7em;
|
18 | font-weight: ${theme('fannypack.fontWeights.bold')};
|
19 | padding: 0.2rem 0.5rem;
|
20 |
|
21 | & {
|
22 | ${theme('fannypack.Divider.content')}
|
23 | }
|
24 | }
|
25 | `;
|
26 | export const verticalProperties = css`
|
27 | height: auto;
|
28 |
|
29 | & {
|
30 | ${theme('fannypack.Divider.vertical')};
|
31 | }
|
32 | `;
|
33 |
|
34 | export const Divider = styled(_Divider)<DividerProps>`
|
35 | opacity: 1;
|
36 | border-color: #e7e9ed;
|
37 |
|
38 | & {
|
39 | ${props => props.content && contentProperties};
|
40 | ${props => props.vertical && verticalProperties};
|
41 | }
|
42 |
|
43 | & {
|
44 | ${theme('fannypack.Divider.base')};
|
45 | }
|
46 | `;
|
47 |
|
48 | export default Divider;
|