-
Notifications
You must be signed in to change notification settings - Fork 5
/
TooltipContent.styled.js
127 lines (105 loc) · 2.67 KB
/
TooltipContent.styled.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import styled, { css } from "styled-components";
import { colors } from "@crave/farmblocks-theme";
import { TOP, CENTER } from "./constants/positions";
const Container = styled.div`
position: relative;
z-index: ${props => props.zIndex};
@media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: ${colors.GREY_32};
position: fixed;
}
`;
const centerAlignment = css`
left: 50%;
transform: translateX(-50%);
`;
const positionXStyle = coordinate => ({ positionX }) => {
if (positionX === CENTER) {
return centerAlignment;
}
return css`
${positionX}: ${coordinate};
`;
};
const positionYStyle = ({ positionY, offset, triggerHeight }) => {
if (positionY === TOP) {
return css`
bottom: ${triggerHeight + Number.parseInt(offset, 10)}px;
`;
}
return css`
top: ${offset};
`;
};
const arrow = ({ hideArrow, positionY, fullScreenBreakpoint }) => {
if (hideArrow) return css``;
return css`
&:after,
&:before {
border: solid 1px rgba(0, 0, 0, 0.16);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:before {
${positionY}: 100%;
border-color: transparent;
border-${positionY}-color: rgba(0, 0, 0, 0.16);
border-width: 8px;
${positionXStyle("7px")};
}
&:after {
${positionY}: calc(100% - 1px);
border-color: transparent;
border-${positionY}-color: #ffffff;
border-width: 7px;
${positionXStyle("8px")};
}
@media only screen and (max-width: ${fullScreenBreakpoint}) {
&:after,
&:before {
display: none;
}
}
`;
};
const StyledTooltip = styled.div`
visibility: ${({ isVisible }) => (isVisible ? "visible" : "hidden")};
position: absolute;
padding: ${props => props.padding || "8px"};
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
border: solid 1px rgba(0, 0, 0, 0.16);
border-radius: 4px;
white-space: pre;
color: ${colors.CARBON};
font-family: lato, sans-serif;
${({ triggerWidth }) =>
positionXStyle(triggerWidth < 32 ? `${triggerWidth / 2 - 16}px` : 0)};
.closeButton {
display: none;
}
${arrow};
${positionYStyle};
overflow: ${props => props.overflow};
@media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
right: 16px;
left: 16px;
white-space: pre-wrap;
top: 50%;
transform: translate(0, -50%);
.closeButton {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 16px;
}
}
`;
export { Container, StyledTooltip };