1 | import { InlineFlex } from '../primitives';
|
2 | import styled, { css, palette, theme } from '../styled';
|
3 | import { LocalBadgeProps } from './Badge';
|
4 |
|
5 | const sizeAttributes: any = {
|
6 | medium: css`
|
7 | & {
|
8 | font-size: 1rem;
|
9 | ${theme('fannypack.Badge.sizes.medium')};
|
10 | }
|
11 | `,
|
12 | large: css`
|
13 | & {
|
14 | font-size: 1.25rem;
|
15 | ${theme('fannypack.Badge.sizes.large')};
|
16 | }
|
17 | `
|
18 | };
|
19 |
|
20 | export default styled(InlineFlex)<LocalBadgeProps>`
|
21 | align-items: center;
|
22 | border-radius: 1rem;
|
23 | justify-content: center;
|
24 | background-color: ${palette()};
|
25 | box-sizing: content-box;
|
26 | padding: 0 0.4em;
|
27 | color: ${props => palette(`${props.palette}Inverted`)};
|
28 | fill: ${props => palette(`${props.palette}Inverted`)};
|
29 | font-size: ${theme('fannypack.fontSizes.100')}rem;
|
30 | font-weight: ${theme('fannypack.fontWeights.semibold')};
|
31 | height: 1.2em;
|
32 |
|
33 | ${props =>
|
34 | !props.children &&
|
35 | css`
|
36 | & {
|
37 | height: 0.5rem;
|
38 | width: 0.5rem;
|
39 | padding: 0px;
|
40 | }
|
41 | `}
|
42 |
|
43 | ${props =>
|
44 | props.isAbsolute &&
|
45 | css`
|
46 | position: absolute;
|
47 | top: -0.4em;
|
48 | right: -0.4em;
|
49 |
|
50 | & {
|
51 | ${theme('fannypack.Badge.absolute')};
|
52 | }
|
53 | `}
|
54 |
|
55 | ${props => props.size && sizeAttributes[props.size]}
|
56 |
|
57 | & {
|
58 | ${theme('fannypack.Badge.base')};
|
59 | }
|
60 | `;
|
61 |
|
\ | No newline at end of file |