Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(ui-toolkit): fix border of popover tip

Browse Source
This commit is contained in:
Sérgio Ramos 2017-12-22 03:24:28 +00:00
parent e297eb7669
commit 6fa74685f1
2 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui-toolkit/src/popover/index.js
View File

@ -17,7 +17,7 @@ const Popper = styled(BasePopper)`
box-shadow: 0 ${remcalc(2)} ${remcalc(6)} rgba(0, 0, 0, 0.1); box-shadow: 0 ${remcalc(2)} ${remcalc(6)} rgba(0, 0, 0, 0.1);
border: ${remcalc(1)} solid ${props => props.theme.grey}; border: ${remcalc(1)} solid ${props => props.theme.grey};
padding: ${remcalc(15)} ${remcalc(18)}; padding: ${remcalc(15)} ${remcalc(18)} ${remcalc(3)} ${remcalc(18)};
${style({ ${style({
background: 'white', background: 'white',

27
packages/ui-toolkit/src/tooltip/style.js
View File

@ -27,12 +27,16 @@ export default ({ background, color, border, arrow }) => css`
margin-bottom: 0; margin-bottom: 0;
&:after { &:after {
content: '';
display: block;
position: absolute;
border-width: ${remcalc(7)} ${remcalc(7)} 0 ${remcalc(7)}; border-width: ${remcalc(7)} ${remcalc(7)} 0 ${remcalc(7)};
border-color: ${props => props.theme[background]} transparent transparent border-color: ${props => props.theme[border]} transparent transparent
transparent; transparent;
bottom: ${remcalc(-6)}; border-style: solid;
margin-top: 0; left: ${remcalc(-7)};
margin-bottom: 0; top: ${remcalc(-6)};
z-index: -1;
} }
} }
@ -44,6 +48,21 @@ export default ({ background, color, border, arrow }) => css`
top: ${remcalc(-6)}; top: ${remcalc(-6)};
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
&:after {
content: '';
display: block;
position: absolute;
border-width: 0 ${remcalc(7)} ${remcalc(7)} ${remcalc(7)};
border-color: transparent transparent ${props => props.theme[border]}
transparent;
border-style: solid;
top: ${remcalc(-1)};
left: ${remcalc(-7)};
margin-top: 0;
margin-bottom: 0;
z-index: -1;
}
} }
/* top & bottom */ /* top & bottom */