-
Notifications
You must be signed in to change notification settings - Fork 9
/
Dialog.styles.js
77 lines (68 loc) · 1.61 KB
/
Dialog.styles.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { spaceSm, spacer } from "@paprika/stylers/lib/helpers";
import { css, keyframes } from "styled-components";
import tokens from "@paprika/tokens/lib/tokens";
const childPanel = css`
border-bottom-left-radius: ${spaceSm};
border-top-left-radius: ${spaceSm};
height: calc(100% - ${spacer(7) + 80}px);
margin-top: ${spacer(7)}px;
`;
function slideIn() {
return keyframes`
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
`;
}
function slideOut() {
return keyframes`
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
`;
}
export const dialogStyles = css`
background: ${tokens.color.white};
box-shadow: ${tokens.modal.shadow};
box-sizing: border-box;
height: 100%;
overflow: auto;
top: 0;
&:focus {
outline: 0;
}
${props => {
const width = Number.isNaN(Number(props.width)) ? props.width : `${props.width}px`;
const animation = props.isOpen ? slideIn() : slideOut();
let childSidePanel = "";
if (props.kind === "child") {
childSidePanel = childPanel;
}
return css`
animation: ${animation} 0.7s ease;
right: 0;
top: ${props.offsetY}px;
width: ${width};
z-index: ${props.zIndex};
${props.isInline ? "position: relative;" : "position: fixed;"}
${props.isOpen ? "opacity: 1" : "opacity: 0"};
${childSidePanel}
`;
}}
`;
export const dialogContentStyles = css`
padding: ${spacer(2)};
${props => {
return props.isSticky ? `margin-bottom: ${props.footerHeight}px;` : "";
}}
`;