1 | import { palette, theme } from 'styled-tools';
|
2 |
|
3 | import styled, { css } from '../styled';
|
4 | import { Box } from '../primitives';
|
5 | import { PaneProps } from './Pane';
|
6 |
|
7 | export const Pane = styled(Box)<PaneProps & { styledBorder?: boolean | 'shadow' | string }>`
|
8 | background-color: white;
|
9 | border-radius: 3px;
|
10 |
|
11 | ${(props: any) =>
|
12 | props.styledBorder !== 'shadow' && typeof props.styledBorder !== 'boolean'
|
13 | ? `border: ${props.styledBorder}`
|
14 | : null};
|
15 | ${(props: any) =>
|
16 | props.styledBorder === 'shadow' &&
|
17 | css`
|
18 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
19 |
|
20 | & {
|
21 | ${theme('fannypack.Pane.border.shadow')};
|
22 | }
|
23 | `};
|
24 | ${(props: any) =>
|
25 | props.elevation &&
|
26 | css`
|
27 | box-shadow: 0px
|
28 | ${(props: any) =>
|
29 | // @ts-ignore
|
30 | theme(`fannypack.Pane.elevations.${props.elevation}`)(props) / 2}px
|
31 | ${theme(`fannypack.Pane.elevations.${props.elevation}`)}px 0px rgba(0, 0, 0, 0.1),
|
32 | 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
33 | `};
|
34 | ${(props: any) =>
|
35 | props.styledBorder === true &&
|
36 | css`
|
37 | border: 1px solid ${palette('white800')};
|
38 |
|
39 | & {
|
40 | ${theme('fannypack.Pane.border.default')};
|
41 | }
|
42 | `};
|
43 | ${(props: any) =>
|
44 | props.isFullWidth &&
|
45 | css`
|
46 | width: 100%;
|
47 | `};
|
48 |
|
49 | & {
|
50 | ${theme('fannypack.Pane.base')};
|
51 | }
|
52 | `;
|
53 |
|
54 | export default Pane;
|
55 |
|
\ | No newline at end of file |